Bootstrap 垂直居中詳解

一、Flexbox 實現 Bootstrap 垂直居中

Bootstrap 的 flexbox 工具類可以讓我們很方便地實現垂直居中，具體步驟如下：

<div class="d-flex align-items-center justify-content-center">
  <p>這是居中的文字</p>
</div>

實現方式很簡單，直接在外層 <div> 元素上添加 d-flex 和 align-items-center 和 justify-content-center 兩個 class 就可以實現垂直居中效果。

其中，d-flex 代表容器為 flex 布局；align-items-center 代表垂直方向上子元素居中對齊；justify-content-center 代表水平方向上子元素居中對齊。

除此之外，Bootstrap 還提供了許多與 flexbox 相關的工具類，例如柵格系統中的與 flexbox 結合使用的類名：justify-content-{breakpoint}-{value} 和 align-items-{breakpoint}-{value}。使用這些工具類可以輕鬆地實現各種垂直居中效果。

二、Table元素

除了使用 flexbox，我們還可以使用 table 元素來實現垂直居中，具體步驟如下：

<div class="d-table">
  <div class="d-table-cell align-middle">
    <p>這是居中的文字</p>
  </div>
</div>

其中，d-table 代表外層元素為 table 布局；d-table-cell 代表單元格；align-middle 代表單元格垂直居中對齊。

需要注意的是，這種方法雖然可行，但並不推薦使用。因為 table 元素不適合用於布局，會影響語義結構。

三、Translate + Position

如果你不想使用 flexbox 或者 table 元素來實現垂直居中，還可以使用 translate 和 position 屬性來實現。具體步驟如下：

<div class="position-relative">
  <div class="position-absolute top-50 start-50 translate-middle">
    <p>這是居中的文字</p>
  </div>
</div>

其中，position-relative 代表相對定位，是為了讓它的直屬子元素 position-absolute 具有參照物；position-absolute 代表絕對定位；top-50 和 start-50 分別代表上下左右都為50%的距離；translate-middle 代表偏移的距離，為元素自身寬度和高度的一半。

需要注意的是，這種方法雖然可行，但是需要將每個要實現垂直居中的元素的父元素都設置為 position-relative，如果場景過於複雜，會影響代碼的可讀性。

四、垂直居中網格系統

Bootstrap 推薦的方式是使用垂直居中網格系統。

具體步驟如下：

<div class="container">
  <div class="row align-items-center">
    <div class="col-sm-4">
    </div>
    <div class="col-sm-4">
      <p>這是居中的文字</p>
    </div>
    <div class="col-sm-4">
    </div>
  </div>
</div>

其中，row align-items-center 中的 align-items-center 表示水平居中對齊，這個只針對單行元素有效，如果是多行元素，就需要再加上 text-center 的 class 來實現居中。

五、總結

通過以上幾種方式，我們可以輕鬆地實現 Bootstrap 的垂直居中效果，其中以 flexbox 和垂直居中網格系統最為推薦。當然，對於場景比較特殊的情況，我們還可以使用其他方式來實現垂直居中。