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

Question

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

我熟悉使用 display: table-cell; 和 vertical-align: middle;(或使用 line-height，但是在使用它们以及尝试让元素填充页面时没有成功。

<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>