使用 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 实现水平居中。
✅ 正确写法如下（已优化结构与语义）：
<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 影响），简化层级更可控。
⚠️ 注意事项：
- 避免在 .row 上同时使用 justify-content-* 和 align-items-center 处理单卡片——除非需要多卡片网格对齐；
- 若页面有固定头部/导航栏，可改用 min-vh-100 并为 .row 添加 mt-[n] 补偿，或采用 d-flex flex-column 布局替代；
- 测试时请确保无其他 CSS 覆盖 .row 的 display: flex 属性（Bootstrap 5 默认启用）。
通过上述方式，卡片即可在任意屏幕尺寸下稳定、精准地呈现于视口正中央，兼具语义性、响应性与可维护性。
