Bootstrap 4 如何垂直居中固定高度的图像引导卡

如何在固定高度的引导卡中垂直居中放置图像

我尝试过使用mx auto和justify资源中心类，但不起作用

代码层：

---

图像应垂直输入卡中。

您应使用d-flex将图像容器显示为：flex，然后将项目对齐到中心

---

您可以使用d-flex将图像容器显示为：flex，然后将项目对齐到中心

---

您可以使用style=text align:center

您可以使用style=text align:center

<div class="card mx-auto mb-2" style="width: 12rem;">
    <div class="" style="height:200px;">
      <img class="card-img-top" src="https://www.fillmurray.com/200/100" alt="Card image cap">
    </div>
  <div class="card-body">
    <p class="card-text">Verticall center this image</p>
  </div>
</div>

<div class="card mx-auto mb-2" style="width: 12rem;">
    <div class="d-flex align-items-center" style="height:200px;">
      <img class="card-img-top" src="https://www.fillmurray.com/200/100" alt="Card image cap">
    </div>
  <div class="card-body">
    <p class="card-text">Verticall center this image</p>
  </div>
</div>