如何垂直对齐div中的元素？

Question

我有一个 div 有两个图像和一个 h1 。所有这些都需要在 div 中垂直对齐，彼此相邻。其中一张图片需要 absolute 位于 div 中。

在所有常见浏览器上工作需要什么 CSS？

 <div id="header">
  <img src=".." ></img>
  <h1>testing...</h1>
  <img src="..."></img>
</div>

原文由 Abdu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

哇，这个问题很流行。这是基于对 vertical-align 属性的误解。这篇优秀的文章对此进行了解释：

了解 vertical-align ，或 Gavin Kistner 的“如何（不）垂直居中内容” 。

“How to center in CSS” 是一个很棒的网络工具，可以帮助找到不同情况下必要的 CSS 居中属性。

---

简而言之（并防止链接失效） ：

• 内联元素（且 仅 内联元素）可以通过 vertical-align: middle 在其上下文中垂直对齐。但是，“上下文”不是整个父容器的高度，而是它们所在的文本行的高度 。jsfiddle 示例
• 对于块元素，垂直对齐更难并且在很大程度上取决于具体情况：
  • If the inner element can have a fixed height , you can make its position absolute and specify its height , margin-top and top position. jsfiddle 示例
  • 如果居中元素 由单行组成 并且 其父高度是固定 的，您可以简单地设置容器的 line-height 来填充它的高度。根据我的经验，这种方法非常通用。 jsfiddle 示例
  • ……还有更多这样的特殊情况。

原文由 Konrad Rudolph 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

现在 Flexbox 支持越来越多，这个应用于包含元素的 CSS 将垂直居中所有包含的项目（除了那些自己指定对齐方式的项目，例如 align-self:start ）

 .container {
    display: flex;
    align-items: center;
}

如果您还需要针对 Internet Explorer 10 和更旧的（< 4.4 (KitKat)）Android 浏览器，请使用带前缀的版本：

 .container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}

原文由 E. Serrano 发布，翻译遵循 CC BY-SA 4.0 许可协议