将文本对齐到div的中心

Question

我有一个大约200px x 40px大小的div。有时这个块会包含一行文本，有时会包含两行文本。如果它包含2行文本，在这种情况下，我已经调整了行高，使其在div内看起来平衡。然而，在只有一行文本的情况下，文本与div的顶部对齐，底部留空。

相反，我希望单行文本在div内垂直居中显示。最好的方法是什么？我应该将文本放在像

这样的辅助元素内，然后尝试应用vertical-align:middle吗？似乎应该有更简单、更流畅的方法来完成这个任务。有什么建议吗？

- Thomas

Answer 1

我不确定它是否在所有浏览器中都可用（在Firefox、Chrome和IE8上可用）（在IE7-上无法使用）

<div style="display: table-row; height: 180px; width: 500px;">
    <div style="display: table-cell; vertical-align: middle; width: 500px; text-align: center;">Text</div>
</div>

我知道的在任何浏览器中都可行的唯一解决方案是创建一个表格，并在单元格上应用垂直对齐。

- BrunoLM

---

嗯，我想这可能是一些丑陋的东西。谢谢大家。 - Thomas

Answer 2

虽然这似乎是一个简单的问题，但在CSS2 AFAK中没有直接的解决方案。 Theme Forrest提供了不同方法的概述。

- cmaderthaner

---

没有一种直接的解决方案能够支持所有版本的Internet Explorer。CSS2可以很好地支持它。 - reisio