我有一个使用三个元素垂直居中未知高度的元素的工作示例:
<section>
<div>
<img src="http://placehold.it/100x100"/>
</div>
</section>
和CSS:
section {
display: table;
width: 100%;
height: 100%;
position: absolute;
text-align: center;
}
div {
display: table-cell;
vertical-align: middle;
}
这里还有一个 JSFiddle 示例:http: //jsfiddle.net/Y6KS9/
但是,如果可能的话,我想避免使用不必要的包装器。例如,让 img 本身显示为表格单元格:
div {
display: table;
width: 100%;
height: 100%;
position: absolute;
text-align: center;
}
img {
display: table-cell;
vertical-align: middle;
}
但是这不起作用 - 请参阅http://jsfiddle.net/U2c9R/上的 JSFiddle 示例- img 不在 div 中居中。
是否可以仅使用两个元素在其父级中垂直居中未知大小的图像?
编辑:我知道 Flexbox,并打算在 IE9 死后彻底抛弃表格单元黑客。但现在我需要支持旧浏览器。