文本在div中始终垂直居中

如果是文本字数固定，在div中垂直居中，相信大家都会

这边分享个不固定文本在div中垂直居中的方法

html代码

<div class="box">
    <div class="text">4月23日上，据最新的现场图片，正在大连造船厂建造的中国首艘国产航母已经往船坞注水，这意味航母已经进入倒计时。</div>
</div>

css代码

.box{position:relative;width:500px;hieght:300px;}
.text{position:absolute;top:50%;left:10px;transform: translateY(-50%);}

该方法运用了css3的translate位移，所以低版本IE是不兼容的。

转载于:https://www.cnblogs.com/kevinxue/p/6753201.html