引导程序4中列的垂直对齐

Question

我在谷歌和这个网站上搜索了如何垂直对齐列居中的答案。我找到了具有这个确切标题的条目，但它们都不起作用，它们都显示了如何水平对齐。甚至bootply等链接到水平而非垂直居中的示例。

我已经按照bootstraps官方网站上的指南进行了操作，它告诉我只需在行上使用class align-items-center，或者在列上添加align-content-center，但这些对我来说不起作用所有，我没有回应。

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

这是我使用的指南：http://getbootstrap.com/docs/4.0/layout/grid/#alignment

我正在使用最新的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属性。但是在您的示例中，您没有在代码中使用行类或d-flex类。

我建议你在代码中添加一行..

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

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

垂直中心：JS Fiddle

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