对齐 - 中间问题

Question

我对vertical-align:middle;的工作方式有什么误解？

我已发布（http://jsfiddle.net/D6RwZ/）一些代码，我希望这些代码在蓝色矩形中垂直对齐一个红色矩形，但它看起来不像。

Answer 1

vertical-align：middle不适用于div（块元素）。您可以参考here了解详情。

如果你想垂直对齐，我认为唯一的选择是使用带有适当参数的margin / padding。

Answer 2

vertical-align只能应用于：

元素

• display:table-cell以垂直对齐元素的内容。
• display:inline或display:inline-block为了在包含它的文本行中垂直对齐元素

后者的廉价黑客：http://jsfiddle.net/8bZQS/

Answer 3

垂直对齐仅适用于内嵌图像和显示：table-cell。

我曾经使用this solution几次，它运作得很好但需要一些工作。如果你正在使用固定大小的元素，绝对是绝对最简单的。动态大小的元素和垂直居中可能非常棘手，需要处理许多浏览器怪癖。