使用CSS实现垂直居中

垂直居中是页面布局中非常常见的效果，那怎么使用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;
}