如何在 Bootstrap 5 中完美居中卡片（水平 + 垂直）-html教程-PHP中文网

如何在 Bootstrap 5 中完美居中卡片（水平 + 垂直）

使用 Bootstrap 5 的 align-items-center 和 vh-100 工具类，配合 mx-auto，可实现卡片在视口内真正居中（水平+垂直），无需手动计算 margin 或额外 CSS。

使用 bootstrap 5 的 `align-items-center` 和 `vh-100` 工具类，配合 `mx-auto`，可实现卡片在视口内真正居中（水平+垂直），无需手动计算 margin 或额外 css。

要在页面中将 Bootstrap 卡片（Card）同时水平和垂直居中于整个视口中央，关键在于利用 Flexbox 布局能力——Bootstrap 5 的 .row 默认是 flex 容器，只需为其添加两个核心类：

vh-100：使行高度占满整个视口高度（100% viewport height）；
align-items-center：在 flex 主轴（默认为垂直方向）上居中对齐子元素。

同时，移除无效的 mt-2（它仅提供固定间距，无法响应式垂直居中），并将卡片所在列的宽度适当调整（如 col-md-6 col-lg-4），再配合 mx-auto 实现水平居中。

✅ 正确写法如下（已优化结构与语义）：

VPS Bootstrap

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

下载

<div class="container-fluid h-100">
  <div class="row align-items-center vh-100">
    <div class="col-12 col-md-8 col-lg-4 mx-auto">
      <div class="card shadow-sm">
        <div class="card-body text-center">
          <h5 class="card-title mb-3">Card title</h5>
          <p class="card-text mb-4">
            Some quick example text to build on the card title and make up the bulk of the card's content.
          </p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
</div>

? 关键说明：

vh-100 必须作用于 flex 容器（即 .row），且其父容器（如 .container-fluid）需确保无高度限制干扰；推荐搭配 h-100 或 min-vh-100 更健壮；
col-12 确保移动端全宽，col-md-8 col-lg-4 提供响应式宽度控制，避免卡片在大屏过宽；
mx-auto 在 flex 布局下仍有效，负责水平居中（因 .row 是 flex 容器，.col-* 是 flex 项目）；
不要嵌套多余容器（如原例中 .container > .row > .col-3 的三层结构易受 padding/margin 影响），简化层级更可控。

⚠️ 注意事项：