html:

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

法一：

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

法二：

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

法三：

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