css垂直居中

1.dispaly:table-cell

适用于固定宽高，且表现为行内元素，如不固定宽高会由内部元素的宽高决定外部的宽高。

<div class="text1">     
    <span>这是一行汉字这是一段汉字这是一大段汉字这是一行汉字这是一段汉字这是一大段汉字</span>
</div>
.text1 {            
            width: 300px;            
            height: 300px;            
            border: 1px solid #000;            
            display: table-cell;            
            vertical-align: middle;            
            text-align: center;        
        }

2.position:absolute

适用于不固定宽高，但必须有内外层的层级结构，内层脱离文档流。top是相对父元素的位移，而translate是相对元素本身的位移。

<div class="text2">     
    <span>这是一行汉字这是一段汉字这是一大段汉字这是一行汉字这是一段汉字这是一大段汉字</span>
</div>
.text2 {            
            width: 50%;            
            height: 30%;            
            border: 1px solid #000;            
            position: relative;        
        }
.text2 span {            
            position: absolute;            
            top: 50%;            
            text-align: center;            
            -webkit-transform: translateY(-50%);            
            -moz-transform: translateY(-50%);            
            -ms-transform: translateY(-50%);            
            transform: translateY(-50%);        
            }

3.display:flex

不用固定宽高，浏览器支持有限，ie 11+。justify-content 属性用于定义如何沿着主轴方向排列子容器。flex-start：起始端对齐，还有flex-end、center、space-around、space-between。align-items 属性用于定义如何沿着交叉轴方向分配子容器的间距。

<div class="text3">        
    <span>这是一行汉字这是一段汉字这是一大段汉字这是一行汉字这是一段汉字这是一大段汉字</span>    
</div>
.text3 {            
            width: 50%;            
            height: 50%;            
            border: 1px solid #000;            
            display: flex;            
            justify-content: center;            
            align-items: center;        
        }

flex参考链接：blog.csdn.net/aliguagua/a…