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

【问题标题】：How to vertically center an image Bootstrap card with fixed height如何垂直居中固定高度的图像引导卡
【发布时间】：2019-08-28 06:35:46
【问题描述】：

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

我尝试过使用 mx-auto 和 justify-content-center 类，但不起作用。

代码：http://codeply.com/go/tXCgay8UDX

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

图片应垂直输入卡片。

【问题讨论】：

标签： bootstrap-4

【解决方案1】：

您可以使用 d-flex 和 align-items-center 使图像容器 display:flex...

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

https://www.codeply.com/go/ZVK6JIaECD

【讨论】：

【解决方案2】：

你可以使用 style="text-align:center"

【讨论】：