方法一：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;
}

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