CSS水平垂直居中
一、利用margin:auto二、利用position: absolute三、弹性盒子四、利用水平对齐和行高五、grid为方便理解,欢迎查看线上效果,在线试一试
一、利用margin:auto
元素有宽度和高度时,利用margin:auto
设置元素水平垂直居中:
HTML代码如下:
<div class="div1"><div class="center"></div></div>
CSS代码如下:
.div1 {background-color: #eee;width: 200px;height: 200px;position: relative;}.div1 .center {width: 50px;height: 50px;background-color: forestgreen;position: absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;}
二、利用position: absolute
HTML代码:
<div class="div2"><div class="center"></div></div>
当已知元素宽度和高度时,可以设置position: absolute
和margin
为负的宽高的一半,CSS代码如下:
.div2 {background-color: #eee;width: 200px;height: 200px;position: relative;margin-top: 20px;}.div2 .center {width: 50px;height: 50px;background-color: rgb(34, 71, 139);position: absolute;left: 50%;top: 50%;margin-left: -25px;margin-top: -25px;}
当已知元素宽度和高度时,也可以利用calc
计算属性设置top
和left
,CSS代码如下:
.center {width: 50px;height: 50px;background-color: rgb(34, 71, 139);position: absolute;left: calc(50% - 25px);top: calc(50% - 25px);}
当元素宽度和高度未知时,可以设置position: absolute
和transform: translate(-50%, -50%)
,CSS代码如下:
.center {width: 50px;height: 50px;background-color: rgb(34, 71, 139);position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
实现效果:
三、弹性盒子
通过为其父元素设置display: flex
来实现居中。
HTML代码如下:
<div class="div4"><div class="center"></div></div>
CSS代码如下:
.div4 {background-color: #eee;width: 200px;height: 200px;position: relative;margin-top: 20px;display: flex;justify-content: center;align-items: center;}.div4 .center {width: 50px;height: 50px;background-color: rgb(240, 248, 166);}
实现效果:
四、利用水平对齐和行高
设置text-align
和line-height
实现单行文本水平垂直居中。
HTML代码如下:
<div class="div5"><p class="center">我要居中</p></div>
CSS代码如下:
.div5 {background-color: #eee;width: 200px;height: 200px;margin-top: 20px;}.div5 .center {text-align: center;line-height: 200px;}
实现效果:
五、grid
HTML代码如下:
<div class="div6"><p class="center">我要居中</p></div>
在网格项目中设置justify-self
、align-self
或者margin: auto
,CSS代码如下:
.div6 {background-color: #eee;width: 200px;height: 200px;margin-top: 20px;display: grid;}.div6 .center {align-self: center;justify-self: center;/* margin: auto; */}
在网格容器上设置justify-items
、align-items
或justify-content
、align-content
,CSS代码如下:
.div6 {background-color: #eee;width: 200px;height: 200px;margin-top: 20px;display: grid;align-items: center;justify-items: center;/* align-content: center;justify-content: center; */}