html - Bootstrap 4，容器中的 flexbox 行。在页面中垂直对齐

Question

我使用的是 Bootstrap 4 alpha 3，我需要使用此代码在页面中简单地垂直对齐此代码:

<div class="container">
      <div class="row">
        <div class="col-sm-4" style="background-color:#ff0000;">Prova</div>
        <div class="col-sm-4">
          <h1 class="text-xs-center">HELLO!</h1>
        </div>
        <div class="col-sm-4"></div>
      </div>
    </div>

Answer 1

如果您可以选择使用 v4 的 flexbox 模式，列将自动具有相同的高度。

然后要垂直对齐文本，请将 display: flex 和 align-items: center 添加到所需的列。