如何在bootstrap 4中垂直和水平居中图像？

Question

我正在使用最新的bootstrap 4并创建了一个400px的div来保存高度范围从100px到350px的图像。我试图水平和垂直居中图像，并设法使用以下代码水平居中图像。

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

我添加了什么类让图像也垂直居中？

Answer 1

在容器上使用d-flex，您可以在图像上使用my-auto以y轴为中心。

Fiddle

<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>