使用 Bootstrap 实现垂直居中：flexbox 法：使用 d-flex、justify-content-center 和 align-items-center 类，将元素置于 flexbox 容器内。align-items-center 类法：对于不支持 flexbox 的浏览器，使用 align-items-center 类，前提是父元素具有已定义的高度。

Bootstrap 垂直居中技术

在使用 Bootstrap 框架时，经常需要将元素垂直居中。有两种主要方法可以实现这一目标：

1. flexbox 法

flexbox 是 Bootstrap 4 中引入的一种布局方式，它提供了更灵活的元素布局。要使用 flexbox 实现垂直居中，可以使用以下代码：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

<code class="html"><div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="d-flex justify-content-center align-items-center">
        你的内容
      </div>
    </div>
  </div>
</div></code>

在上面的代码中，d-flex 类使父元素成为一个 flexbox 容器，justify-content-center 和 align-items-center 类分别将元素水平和垂直居中在容器内。

2. align-items-center 类法

对于不支持 flexbox 的浏览器，可以使用 align-items-center 类。此类将元素垂直居中在父元素内，前提是父元素具有已定义的高度。

<code class="html"><div class="container">
  <div class="row">
    <div class="col-md-12" style="height: 100px;">
      <div class="align-items-center">
        你的内容
      </div>
    </div>
  </div>
</div></code>

注意，在使用 align-items-center 类时，父元素必须具有已定义的高度。