如何在boostrap 4中垂直和水平居中圖像？

Question

我正在使用最新的 bootstrap 4 並創建了一個 400px 的 div 來保存高度范圍從 100px 到 350px 的圖像。 我試圖將圖像水平和垂直居中，並設法使用以下代碼將圖像水平居中。

<img src="..." class="mx-auto d-block" alt="...">

我添加什么類以使圖像也垂直居中在 div 中？

Answer 1

在 conatiner 上使用 d-flex，您可以在圖像上使用 my-auto 以 y 軸為中心。

小提琴

<div class="d-flex" style="height: 400px; border: 2px orange solid;"> 
  <img style="height: 300px; width: 300px;" src="https://images.pexels.com/photos/789141/pexels-photo-789141.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" class="mx-auto my-auto d-block" alt="Turtle pic">
  <img style="height: 200px; width: 200px;" src="https://images.pexels.com/photos/789141/pexels-photo-789141.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" class="mx-auto my-auto d-block" alt="Turtle pic">
</div>