显示：以两个元素而不是三个元素为中心的表格单元格

Question

我有一个使用三个元素垂直居中未知高度的元素的工作示例：

<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 死后彻底抛弃表格单元黑客。但是现在我需要支持旧的浏览器。

Answer 1

您可以尝试使用 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，这将无法工作。但也许这是一个选择？