利用translate來垂直居中

最近在做移動端的頁面，其間遇到一個問題，讓文本垂直居中，之后發現一個暫時比較好，基本人畜無害的方法，在這記錄一下，也給有需要的朋友的做一個分享。

先來看一下傳統的解決方法：

#test{
        height: 50px;
        font-size: 2rem;
        line-height: 50px;
        text-align: center;
        border: 1px solid red;
 }
<div id="test">
        <span>this is test</span>
</div>

效果可以看：傳統居中方式

其中的關鍵是：父級的div高度已知，然后設置line-height和height相等

但是在移動端開發的過程中，往往需要適配小屏幕，這就導致div的高度得根據設計稿的比例來用百分比代替，並不能寫成固定值。這就會導致上面的demo會失效，不信的同學可以點開上面的鏈接，將高度改為百分比試試。

現在我們就要用到人畜無害的css3方式了：

 

#test{
    background-color: gray;
    height: 40%;
    font-size: 2rem;
    position: relative;
}
span{
    position: absolute;
    top:50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
}　

效果：translate居中

 實現的關鍵：父級div設置定位為relative或者absolute，要定位的元素做如上的設置，即可保證垂直居中。

 

但是，一開始說的基本上人畜無害時什么依意思捏？

注意：如果你使用了css3的動畫，並且在動畫中同樣使用了translate來操作，那么這樣的寫法就會有問題，動畫執行完會導致位置出現偏移。

當然，網上還有其他的垂直居中解決方案，比如利用css3的 彈性和模型，這個坑留着，下次再來挖。

相關鏈接：從一個居中方法說起