在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定義，那么如何垂直居中圖像呢？

我看過的所有其他解決方案都沒有涵蓋最大高度。

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>