div中的垂直居中图像

Question

我有一个div ...

.posts-post-image {
  width: 100%;
  vertical-align: middle;
}

.posts-post-image-wrapper {
  max-height: 300px;
  overflow: hidden;
  width: 100%;
}

<div class="posts-post-image-wrapper">
  <img class="posts-post-image" src="https://upload.wikimedia.org/wikipedia/commons/2/23/Lake_mapourika_NZ.jpeg">
</div>

div的高度由max-height定义，那么如何将图像垂直居中？

我看过的所有其他解决方案都没有涵盖max-height。

Answer 1

如果您将包装器设为flexbox，则可以使用align-items将图像居中，如下所示：

.posts-post-image {
  width: 100%;
  vertical-align: middle;
}

.posts-post-image-wrapper {
  display: flex;
  align-items: center;
  max-height: 300px;
  overflow: hidden;
  width: 100%;
}

<div class="posts-post-image-wrapper">
  <img class="posts-post-image" src="https://upload.wikimedia.org/wikipedia/commons/2/23/Lake_mapourika_NZ.jpeg">
</div>