Bootstrap 4 垂直對齊

使用 CSS 和 Bootstrap 將元素垂直對齊到中心或底部對齊始終是一個挑戰。期望的垂直對齊可以在父容器內，或相對於相鄰元素。

現在，預設情況下 Bootstrap 4 是 **flexbox，**有許多不同的垂直對齊方法： 自動邊距 ， Flexbox 實用程式或 Display Utilities以及 Vertical Align Utilities 。

起初， Vertical Alignment Utilities 似乎是一個明顯的選擇，但這些只適用於內聯和表格顯示元素。以下是一些 Bootstrap 4 垂直對齊選項和方案……

1 - 使用自動邊距的垂直中心：

垂直居中的一種方法是使用 my-auto。這會將元素置於其容器中心。例如，h-100 使行成為全高，my-auto 將使 col-sm-12 列垂直居中。

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

垂直中心使用自動邊距演示

my-auto 表示垂直 y 軸上的邊距，相當於：

margin-top: auto;
margin-bottom: auto;

2 - 帶 Flexbox 的垂直中心：

由於 Bootstrap 4 .row 現在是 display:flex，你可以在任何列上使用 align-self-center 來垂直居中…

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

或者，在整個 .row 上使用 align-items-center 來垂直居中對齊行中的所有 col-* …

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

垂直中心不同高度列演示

3 - 垂直中心使用 Display Utils：

自舉 4 具有顯示 utils 的可用於 display:table，display:table-cell，display:inline 等。這些可以與使用垂直取向 utils 的對準內聯的，內聯塊或表格單元格的元件。

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

垂直中心使用 Display Utils 演示