在固定高度 div 中居中文本

Question

我想在固定高度的 div 中居中一些文本。

我做了以下小提琴

<div style="height:180px;border:1px solid black;vertical-align:middle;">
     <h1 style="vertical-align:middle;">Contact</h1> 
</div>

<div style="height:180px;border:1px solid black;vertical-align:middle;">
    <h2>Welcome to the</h2>
    <h1>AAA</h1>
    <h4>system</h4>
</div>

我尝试了 vertical-align:middle 的各种选项，将其应用于不同的元素，但似乎不起作用。

我确实看到了其他问题，其中 line-height 设置为与 font-size 相同的高度，但在第二个示例中，我有多行不同高度的文本。

有没有好的方法可以做到这一点？

Answer 1

曾经 display table-cell

像这样

.parent{
    height:180px;border:1px solid black;vertical-align:middle;
    display:table-cell;
}

演示

不要用来inline css写一个类external css和define css