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 演示