CSS移动端实现元素垂直居中

方法一：table-cell

display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7就除外了。

<div class="box box1">
    <span>垂直居中</span>
</div>
 
.box1{    
    display: table-cell;    
    vertical-align: middle;    
    text-align: center;            
}

注意 ：此属性不能与 float:left 或是 position:absolute 一起使用。对margin值无反应，响应padding值。

方法二： display:flex

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

方法三： translate

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

通过translate来实现移位。

方法四：display:flex 和 margin:auto

.box4{    
    display: flex;    
    text-align: center;
}
 
.box4 span{
    margin: auto;
}

每一种办法都不难理解，而且在移动端兼容性没有问题。