如何使用 Bootstrap 4 将图像居中对齐在 div 内？ [复制]

Question

我正在使用最新版本的 Bootstrap，即 v4.0.0-beta.3，我有一个位于高度固定的 div 标签内的图像，我想将图像对齐在绝对中心div 标签。尽管我可以使用 mx-auto 和 d-block 类将图像在水平中心对齐，但是对于垂直对齐，即使遵循许多 stackoverflow 答案（如 this 和 @987654322）中的方法，我也无法这样做@。这是代码。

.border-section {
  border: 2px solid #D0D0D0;
  margin-top: 20px;
}

<div class="container">
  <div class="row">
    <div class="col-sm-3 mr-4 border-section" style="height:290px">
      <img class="mx-auto d-block img-fluid" src="http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png" alt="View">
    </div>
  </div>
</div>

有人可以帮忙吗？

Answer 1

试试这个

.border-section {
  border: 2px solid #D0D0D0;
  margin-top: 20px;
  position: relative;
}

img {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  margin: auto;
  top: 0;
  bottom: 0;
}

<div class="container">
  <div class="row">
    <div class="col-sm-3 mr-4 border-section" style="height:290px">
      <img class="mx-auto d-block img-fluid" src="http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png" alt="View">
    </div>
  </div>
</div>