一、Flexbox 实现 Bootstrap 垂直居中
Bootstrap 的 flexbox 工具类可以让我们很方便地实现垂直居中，具体步骤如下：
这是居中的文字
实现方式很简单，直接在外层
其中，d-flex 代表容器为 flex 布局；align-items-center 代表垂直方向上子元素居中对齐；justify-content-center 代表水平方向上子元素居中对齐。
除此之外，Bootstrap 还提供了许多与 flexbox 相关的工具类，例如栅格系统中的与 flexbox 结合使用的类名：justify-content-{breakpoint}-{value} 和 align-items-{breakpoint}-{value}。使用这些工具类可以轻松地实现各种垂直居中效果。
二、Table元素
除了使用 flexbox，我们还可以使用 table 元素来实现垂直居中，具体步骤如下：
这是居中的文字
其中，d-table 代表外层元素为 table 布局；d-table-cell 代表单元格；align-middle 代表单元格垂直居中对齐。
需要注意的是，这种方法虽然可行，但并不推荐使用。因为 table 元素不适合用于布局，会影响语义结构。
三、Translate + Position
如果你不想使用 flexbox 或者 table 元素来实现垂直居中，还可以使用 translate 和 position 属性来实现。具体步骤如下：
这是居中的文字
其中，position-relative 代表相对定位，是为了让它的直属子元素 position-absolute 具有参照物；position-absolute 代表绝对定位；top-50 和 start-50 分别代表上下左右都为50%的距离；translate-middle 代表偏移的距离，为元素自身宽度和高度的一半。
需要注意的是，这种方法虽然可行，但是需要将每个要实现垂直居中的元素的父元素都设置为 position-relative，如果场景过于复杂，会影响代码的可读性。
四、垂直居中网格系统
Bootstrap 推荐的方式是使用垂直居中网格系统。
具体步骤如下：
这是居中的文字
其中，row align-items-center 中的 align-items-center 表示水平居中对齐，这个只针对单行元素有效，如果是多行元素，就需要再加上 text-center 的 class 来实现居中。
五、总结
通过以上几种方式，我们可以轻松地实现 Bootstrap 的垂直居中效果，其中以 flexbox 和垂直居中网格系统最为推荐。当然，对于场景比较特殊的情况，我们还可以使用其他方式来实现垂直居中。
京公网安备 11010802030320号