CSS技巧（七）：垂直居中

方法1：table-cell

<div class="box box1">
        <span>垂直居中</span>
</div>

.box1{
    display: table-cell;
    vertical-align: middle;
    text-align: center;        

 

 

方法2：display:flex

 

.box2{
    display: flex;
    justify-content:center;
    align-items:Center;
}

 

方法3：translate

.box3{
            position: absolute;
            top:50%;
            left:50%;
            width:100%;
            transform:translate(-50%,-50%);
            text-align: center;
        }