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

【问题标题】：Bootstrap 4, flexbox row in a container. Align vertically in the pageBootstrap 4，容器中的 flexbox 行。在页面中垂直对齐
【发布时间】：2016-03-11 01:31:13
【问题描述】：

我使用的是 Bootstrap 4 alpha 3，我需要将此代码 in page 与此代码进行简单的垂直对齐：

<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>

【问题讨论】：

添加这个 css 将解决问题 .container h1{ margin : 0px;}

标签： html css twitter-bootstrap flexbox

【解决方案1】：

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

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

【讨论】：

对于整页容器高度，我该怎么办？
试试html, body, .container {height: 100%;} ?
什么都没有。如果我在.row 上使用height: 600px;，它就可以工作。
好的，在上面包含.row
好的。现在它起作用了。使用 Bootstrap 4 可以找到一种自然的方式吗？