如何使用CSS动态地垂直居中1或2行文本？

Question

请注意附加的图像/线框。如何使用CSS构建此元素。如果有一行文本，它是垂直居中的，但也支持2行也是垂直居中的？

由于

Answer 1

您可以通过制作包装器div display:table:和内部文本div display:table-cell来实现此目的。见下面的例子：

HTML：

<div class="wrapper">
    <div class="inner">
        One Line</br>
        Two Line</br>
        Three Line</br>
    </div>
</div>

CSS：

.wrapper{
width:400px;
height:200px;
display:table;
background:brown;
}

.inner{
display:table-cell;
vertical-align:middle;
text-align:center;
}

FIDDLE： http://jsfiddle.net/pgwL47oy/1/

Answer 2

您的问题评论中已经提到过这一点，但通常情况下display: table-cell;与vertical-align: middle;的使用情况就是您所追求的。

我们的想法是将父容器显示为带有display: table;的表，然后使用包含这些文本节点的span或paragraph元素给出上述{{1}用table-cell显示。

之前它对我有用，应该值得一试！

Here's a CSS Tricks article that could help you out further

希望有所帮助！ ：）