bootstrap 4 中列的垂直對齊

Question

我在谷歌和這個網站上搜索過關於如何垂直對齊列以使其居中的答案。 我找到了具有這個確切標題的條目，但它們都不起作用，它們都顯示了如何水平對齊。 甚至 bootply 的等鏈接到水平居中而不是垂直居中的示例。

我遵循了 bootstraps 官方網站上的指南，它告訴我只在行上使用類 align-items-center，或在列上添加 align-content-center，但這些對我不起作用所有，我沒有得到任何回應。

有人可以告訴我我在這里做錯了什么嗎？

我正在使用最新的引導程序 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 屬性。 但是在您的示例中，您沒有在代碼中使用 row 類或 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