bootstrap 4 中列的垂直对齐方式

Question

我在 google 和本网站上搜索了有关如何垂直对齐列以使其居中的答案。我找到了具有这个确切标题的条目，但其中 none 有效，它们都显示了如何水平对齐。即使是 bootply 等链接到水平居中而不是垂直居中的示例。

我已经按照 bootstrap 官方网站上的指南进行操作，它告诉我只需使用行中的 class align-items-center，或者添加 align-content-center 在专栏上，但这些对我根本不起作用，我没有得到任何回应。

谁能告诉我我做错了什么？

我使用的是最新的 bootstrap v4.0.0.beta-2.

我的代码示例：

<div class="container">
  <div class="row align-items-center">
    <div class="col-3"><span>test</span></div>
  </div>
</div>

预期结果：包含文本 "test" 的列应在我的页面上垂直居中。

实际结果：文字显示在页面左上角。

Answer 1

Bootstrap 行将包含 flex 属性。只有这样，我们才能为子 div 使用 flex 属性。但是在您的示例中，您没有在代码中使用行 class 或 d-flex class。

我建议您在代码中添加行..

<div class="container">
  <div class="row align-items-center">
    <div class="col-3"><span>test</span></div>
  </div>
</div>

现在您的代码将使文本垂直居中，但在容器高度内。它不会位于您的 html 页面的中心。

垂直中心：JS Fiddle

要使您的文本位于页面中央，请将行 div 设置为全高 100vh

Vertical alignment of columns in bootstrap 4