移动端实现元素垂直居中的方法

实现元素垂直居中的方法很多，相信大家都能说出几种。相对于PC端，移动端的方法会更多点，平时在网上收集了一些，在此贴出来分享给大家，仅供参考。

方法1:table-cell 
html结构

1. <div class="box box1">
2.     <span>垂直居中</span>
3. </div>

 CSS

1. .box1{    
2.     display: table-cell;    
3.     vertical-align: middle;    
4.     text-align: center;            
5. }

方法2：display:flex

 

1. .box2{    
2.     display: flex;    
3.     justify-content:center;    
4.     align-items:Center;
5. }

 

方法3：绝对定位和负边距

 

1. .box3{    
2. position:relative;
3. }
4. .box3 span{           
5.      position: absolute;          
6.      width:100px;