如何在填充页面的容器中垂直对齐图像？

Question

我正在创建一个图片库，其中图片在整个页面中居中。水平部分当然很容易，但垂直部分给人带来麻烦。

我熟悉使用display: table-cell;和vertical-align: middle;（或使用line-height，但在使用它们并尝试让元素填充页面时却没有成功。< / p>

<div id='contain'>
   <img src='url' />
</div>

我无法设置#contain的行高，因为容器的高度会因窗口大小而异。

如果我绝对定位#contain，则无论我如何设置框的大小，应用vertical-align:middle都不会垂直居中图像。

如果我尝试调整#contain以填充没有绝对定位的窗口，width: 100%和height: 100%（或使用最小宽度/最小高度）不会填充页面。同样，我不能指定确切的值，因为它们会有所不同。

我知道我总是可以将图像设置为#contain的背景（或者使用JavaScript来计算高度），但是如果有一种CSS / HTML方式可以解决这个没有表格的问题，我宁愿选择用那个。

Answer 1

尝试将img包装在一个额外的div中，然后使用以下css：

#contain {
  display: table;
  width: 100%;
  height: 100%;
}
#contain div {
  display: table-cell;
  vertical-align: middle;
}

HTML：

<div id='contain'>
   <div><img src='url' /></div>
</div>