如何在 Bootstrap 中设置垂直对齐？

在 Bootstrap 中，使用垂直对齐功能可以使元素在容器中上下居中或底部对齐。本文将介绍如何在 Bootstrap 中设置垂直对齐。

使用 Flexbox

Flexbox 是一种新的 CSS 布局方式，可以使元素更容易地垂直对齐。在 Bootstrap 4 中，使用 Flexbox 可以非常方便地实现垂直对齐。

方法一：使用 justify-content-center 和 align-items-center

首先，在需要垂直对齐的元素所在的容器上添加以下类：

d-flex justify-content-center align-items-center

其中，d-flex 表示使用 Flexbox 布局，justify-content-center 表示沿水平方向居中对齐，align-items-center 表示沿垂直方向居中对齐。

例如，以下代码可以使一个 div 元素在容器中垂直居中：

<div class="d-flex justify-content-center align-items-center" style="height:200px">
  <div>
    垂直居中
  </div>
</div>

注意，这里需要给容器设置一个高度，否则容器将无法居中。

方法二：使用 align-self-center

在需要垂直对齐的元素上添加 align-self-center 类即可实现在容器中垂直居中对齐。

例如，以下代码可以使一个 div 元素在容器中垂直居中：

<div class="d-flex" style="height:200px">
  <div class="align-self-center">
    垂直居中
  </div>
</div>

使用表格

在 Bootstrap 中，表格也可以用来实现元素的垂直对齐。为了垂直居中，需要增加一个具有 vertical-align:middle 样式的 td 或 th 标签。

例如，以下代码可以使一个 div 元素在容器中垂直居中：

<table style="height:200px">
  <tr>
    <td class="align-middle">
      <div>
        垂直居中
      </div>
    </td>
  </tr>
</table>

总结

本文介绍了在 Bootstrap 中设置垂直对齐的两种常用方法：使用 Flexbox 和使用表格。使用 Flexbox 可以非常方便地实现垂直对齐，而使用表格虽然稍微比较麻烦，但仍然是一种可行的方法。