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

【问题标题】：Center element vertically in bootstrap 4.0?在引导程序 4.0 中垂直居中元素？
【发布时间】：2018-02-13 01:08:10
【问题描述】：

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

【问题讨论】：

Vertical alignment in Bootstrap 4、Vertical Align Center in Bootstrap 4、How do you get centered content using Twitter bootstrap? 的可能重复项
贴出你试过的代码。

标签： html sass bootstrap-4 bootstrap-grid

【解决方案1】：

使用Bootstrap的align-items-center，可以读取here

<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垂直居中，可以阅读here

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

【讨论】：