协慌网

我有一个带两个图像的 div 和一个h1 。它们都需要在 div 内垂直对齐，彼此相邻。

其中一张图片必须absolute位于 div 中。

要在所有常见的浏览器上运行，需要什么 CSS？

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

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

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

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

简而言之_{^{（并防止链接腐烂）}} ：

• 内联元素 （并且仅内联元素）可以通过vertical-align: middle在其上下文中vertical-align: middle 。但是，“上下文” 不是整个父容器的高度，而是它们所在的文本行的高度。jsfiddle 示例
• 对于块元素，垂直对齐更加困难，并且在很大程度上取决于特定情况：
  • 如果内部元素可以具有固定的 height ，则可以使其位置absolute并指定其height ， margin-top和top位置。 jsfiddle 示例
  • 如果居中元素由单条线组成， 并且 其父级高度是固定的 ，则只需设置容器的line-height即可填充其高度。根据我的经验，此方法用途广泛。 jsfiddle 示例
  • …… 还有更多这样的特殊情况。

现在对 flexbox 的支持正在增加，应用于 CSS 元素的 CSS 将使所包含的项目垂直居中：

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

如果您还需要定位 Explorer 10 和旧的（<4.4）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;
}

我使用了以下非常简单的代码：

HTML：

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

CSS：

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

显然，无论您使用.class还是#id ，结果都不会改变。