多行文本垂直居中解决方案

Question

固定高度的容器，内部有两行或者两行以上的文本，水平居中用text-align：center,那么垂直居中呢？

Answer 1

<div style="display:table;height:400px;">
    <span style="display:table-cell;vertical-align:middle;">你要填写的内容</span>
</div>

Answer 2

给个比较全面的参考链接 使用CSS居中 From CSS-Tricks

Answer 3

直接flex，如果不考虑低级浏览器的话，
或者table

.middle-box{display: table; height: 300px;}
.middle-inner{display: table-cell; vertical-align:middle; text-align:center;}

或者相对定位和绝对定位组合

.middle-inner { position: absolute; top:50%;}
.middle-inner p {position: relative; top: -50%}