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…