我有一个使用三个元素垂直居中未知高度元素的工作示例:
<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 死后完全放弃表格单元格 hack。但现在我需要支持旧浏览器。
最佳答案
您可以尝试使用 CSS3 Flexible Box Model .
您应该检查浏览器的可用性。正如您通过 -webkit
供应商前缀所见,我的示例目前仅适用于基于 -webkit
的渲染引擎。但我很确定它适用于大多数现代浏览器。
以下是支持灵活盒模型的浏览器概览:http://caniuse.com/#feat=flexbox
div {
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
height:100%;
width:100%;
position:absolute;
}
示例:http://jsfiddle.net/U2c9R/4/
更新
对于 CSS3 灵活盒模型的跨浏览器支持,您可以使用 Modernizr和一个合适的 Polyfill它增加了对 IE 6-9
和 Opera 10.0+
的支持。唯一的提示是,如果没有 JavaScript,这将无法工作。但也许这是一个选择?
关于css - 显示 : table-cell centering with two elements, 而不是三个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13912833/