垂直居中是页面布局中非常常见的效果,那怎么使用CSS实现垂直居中呢?
<div class="box">
<span>实现垂直居中</span>
</div>
1.table-cell
.box {
display: table-cell;
vertical-align: middle;
text-align: center;
}
2.flex
.box {
display: flex;
justify-content: center; /*设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。*/
align-items: center; /*定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。*/
}
3.使用绝对定位和负边距,需要设置元素的宽高
.box {
position: relative;
}
.box span {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -50px;
text-align: center;
}
4.绝对定位和0,需要确定内部元素的宽高,可以使用百分比,适用于移动端的设置
.box span {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
5.使用CSS3的平移translate
.box span {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
6.父元素使用flex,子元素使用margin: auto
.box {
display: flex;
text-align: center;
}
.box span {
margin: auto;
}