在固定高度 div 中居中文本答案

【问题标题】：Center text in fixed height div在固定高度 div 中居中文本
【发布时间】：2013-05-15 22:44:07
【问题描述】：

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

我做了以下fiddle

<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>

我已经尝试了垂直对齐的各种选项：middle 将它应用于不同的元素，但它似乎不起作用。

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

有什么好办法吗？

【问题讨论】：

类似stackoverflow.com/questions/16244387/…
喜欢this?
如果您将内联元素垂直居中在一行上，那么行高等于高度技术非常有用。但是，您正在处理一种不同的布局情况，您希望将具有可变行数的块垂直居中。在这种情况下，表格单元方法可能是最好的。但是请注意，IE7 不支持 table-cell。

标签： css positioning

【解决方案1】：

曾经displaytable-cell

像这样

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

Demo

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

【讨论】：

div 还应用了一个浮点数jsfiddle.net/wzNp3/8，这似乎搞砸了，有什么想法吗？
如果此框中的单行像这样jsfiddle.net/rohitazad/wzNp3/11，则使用行高
不幸的是，我无法应用行高，因为这是在模板中，并且在运行时我不知道文本是单行还是多行

【解决方案2】：

垂直对齐总是带来一些麻烦。您应该将该 css 属性仅应用于表 (td) 元素和内联元素，而不是像 div 这样的块元素。

要将某物定位在中间，您可以使用非常简单的解决方案 - 使用绝对定位。

创建子块并将其位置设置为绝对位置，将其从顶部移动 50%，并将 margin-top 设置为负值，数量等于父块高度的一半。将你父母的位置设置为相对。

#parent {
    position: relative;
    height: 180px;
}

#child {
    position: absolute;
    top: 50%;
    margin-top: -90px;
}

<div id="parent">
    <div id="child">
        <h1>sample</h1>
        <h2>sample</h2>
    </div>
</div>

【讨论】：