html 在div中间放一张图片

Question

我有一个像这样的 html:

<div class="image-detail">

    <div class="image-detail-image">
        <img src="http://placehold.it/150x150" alt="" />
    </div>
</div>

它的 CSS 是这样的:

.image-detail{
  height: 500px;
  width: 100%;
  background-color: red;
  text-align: center;
}
.image-detail-image{
  max-height: 100%;
  max-width: 100%;
  vartical-align: center;
}

我希望图像位于 div 的中心。正如预期的那样，但只是从左和右。它总是固定在顶部，如果图像很小，底部会有空隙。

我希望我的图像在左右和自上而下的中间位置完全相等。

Answer 1

无论你的 div 有多大，如果你想把它放在中间，试试 object-fit: cover。