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的弹性箱模式，则列将自动具有相同的高度。

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