如何使用 CSS 将 HTML 中的 div 元素内的图像垂直居中？

我有一个这样的标记：

<div>
  <img />
</div>

div 高于 img：

div {
  height: 100px;
}

img {
  height: dynamic-value-smaller-than-100px;
}

我需要图像位于 div 的中间（其上方和下方具有相同数量的空白）。

我尝试了这个，但它不起作用：

div {
  vertical-align: middle;
}

如果您的图像纯粹是装饰性的，那么将其用作背景图像可能是一个更具语义的解决方案。然后您可以指定背景的位置

background-position: center center;

如果它不是装饰性的并且构成有价值的信息，那么 img 标签是合理的。在这种情况下，您需要做的是使用以下属性设置包含 div 的样式：

div{
    display: table-cell; vertical-align: middle 
}

在这里阅读有关此技术的更多信息 http://www.brunildo.org/test/img_center.html。据报告不适用于 IE6/7（适用于 IE8）。