html - 垂直对齐固定 div 内的动态文本

Question

我有一个高度为 200 像素的 div。我的文字有时是一行，有时是两行。当文本的高度发生变化时，我如何将文本居中？看起来很简单，但我无法在任何地方找到解决方案。

现在我的 html 是 <div class="class1"><?php echo $variable; ?></div>

我的CSS是

.class1 {
display:inline-block;
position:absolute;
left:235px; //Unimportant to question
height:200px;
width:415px;
top:15px;
text-align:center;
font-size:36px;
vertical-align:middle;
}

虽然这并没有使它居中。我试过使用 line-height:200px; ，尽管当我的文本变成两行时，下一行比第一行低 200 像素。

Answer 1

您可以添加一个虚拟元素(或使用 :before)并将其高度设置为 100%。然后，使用内联 block 和 vertical-align，您可以垂直居中:

.vertical-center:before, .vertical-center > * {
    display: inline-block;
    vertical-align: middle;
}
.vertical-center:before {
    height: 100%;
    content:'';
}

Demo