元素在一个div中的垂直对齐
我有一个div有两个图像和一个h1 。 所有这些都需要在div内相互垂直对齐。
其中一个图像需要在div内absolute定位。
这是在所有常用浏览器上工作所需的CSS是什么？
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
哇，这个问题很受欢迎。 这是基于vertical-align属性的误解。 这篇优秀的文章解释道：
了解vertical-align ，或由Gavin Kistner撰写的“如何（不）垂直居中内容”。
“如何以CSS为中心”是一款出色的网络工具，可帮助您针对不同情况找到必要的CSS集中属性。
简而言之（并防止链接腐烂）：
vertical-align: middle在其上下文中vertical-align: middle 。 但是，“上下文”不是整个父容器高度，而是它们所在文本行的高度。jsfiddle示例 absolute并指定其height ， margin-top和top位置。 jsfiddle的例子 line-height来填充其高度。 根据我的经验，这种方法非常灵活。 jsfiddle的例子 我用这个非常简单的代码：
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 ，结果都不会改变。
现在Flexbox支持正在增加，这个应用于包含元素的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;
}