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

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

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

---

我应该添加什么类来使图像也垂直居中于div中？

在conatiner上使用d-flex，您可以在图像上使用“我的自动”来居中于y轴

---

container flex

d-flex

你的问题，点击“JavaScript/HTML/CSS snippet”图标，在底部发布你当前完整的

代码片段。换句话说，发布所有相关代码。您当前的代码段不完整。
<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>