使用 Bootstrap 5 的 align-items-center + vh-100 工具类组合，配合 mx-auto，可实现卡片在视口内真正的水平垂直居中，无需手动计算 margin 或额外 CSS。
使用 bootstrap 5 的 `align-items-center` + `vh-100` 工具类组合，配合 `mx-auto`，可实现卡片在视口内真正的水平垂直居中，无需手动计算 margin 或额外 css。
在 Bootstrap 中仅用 mx-auto 只能实现水平居中，而 mt-* 类（如 mt-2）仅提供固定间距，无法响应式地将元素垂直居中于整个屏幕——这是初学者常见的误解。真正可靠的解决方案是利用 Flexbox 布局能力：将父容器设为高度 100% 视口（vh-100），并启用垂直对齐（align-items-center），再结合 mx-auto 控制子元素水平居中。
以下是修正后的完整 HTML 结构（关键修改已加注释）：
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Centered Bootstrap Card</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"><!-- ✅ 关键：使用 vh-100 设置全高容器，并启用 Flex 垂直居中 --><div class="d-flex flex-column vh-100">
<div class="row align-items-center flex-fill">
<div class="col-12 col-md-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 text-muted">
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>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
✅ 核心要点说明：
- ：使根容器成为 Flex 容器且占满整个视口高度；：flex-fill 确保该行占据剩余全部空间，align-items-center 实现垂直居中；：mx-auto 水平居中，同时使用响应式栅格（如 col-md-4）控制卡片宽度，避免在小屏上过宽；
- 移除了无效的 mt-2 和冗余的嵌套 .container —— 因为 vh-100 需要从顶层生效，过度包裹会破坏高度继承。
⚠️ 注意事项：
- 不要将 vh-100 应用于 .container 或 .row 内部普通 div，必须作用于具备 Flex 特性的直接父容器；
- 若页面有固定头部/导航栏，可改用 min-vh-100 并预留顶部空间（如 pt-5），避免内容被遮挡；
- 在移动端，建议搭配 col-12 或 col-sm-10 col-md-6 等响应式列宽，提升可读性。
通过以上结构，卡片将在任意设备上稳定、精准地呈现于屏幕正中央——这才是 Bootstrap 5 推荐的现代居中实践方式。
