如何在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 
}