html - 在引导程序 4.0 中垂直居中元素？

Question

我希望一个元素在页面中垂直居中，并且我使用的是 bootstrap 4.0。我发现的大多数方法都是关于早期版本或 alpha 的，官方方法不起作用，所以，有人可以一劳永逸地解释一下如何在引导程序中垂直居中元素吗？

Answer 1

使用 Bootstrap 的align-items-center，可以在这里阅读

<div class="container">
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

---

编辑

您还可以使用 Bootstrap 对 flex box 垂直居中的新支持，可以在此处阅读

<div class="d-flex align-items-center">...</div>