使用 bootstrap 5 的 flexbox 工具类（如 `align-items-center`、`justify-content-center`）配合 `h-100` 或 `min-vh-100`，可精准实现 section 内容在视口中的垂直+水平居中；需注意容器层级与类名的语义匹配。
在 Bootstrap 5 中，居中内容不再依赖传统 margin 技巧或 hack 方式，而是通过原生 Flexbox 布局系统高效实现。核心在于：将目标容器设为 Flex 容器，并应用对应的对齐工具类。
✅ 正确做法：层级与类名协同控制
Bootstrap 5 提供了语义清晰的 Flex 工具类：
- d-flex：启用 Flex 布局（必需前提）
- justify-content-center：水平居中（主轴）
- align-items-center：垂直居中（交叉轴）
- min-vh-100：替代 height: 100vh，避免因滚动条导致高度计算偏差（推荐）
⚠️ 注意：.row 默认已是 display: flex，因此无需额外加 d-flex；但若需居中整个 .row 内容，必须确保其父容器具备明确高度（如 min-vh-100），否则 align-items-center 无效。
✅ 示例代码（优化后）
<section class="min-vh-100 d-flex align-items-center justify-content-center" style="background-color: lightgreen;">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-lg-6">
<h1 class="mb-3">Heading</h1>
<p class="lead">Centered content with responsive alignment.</p>
</div>
<div class="col-lg-6">
<img src="https://via.placeholder.com/400x200/09f/fff?text=Image" class="img-fluid rounded" alt="Placeholder">
</div>
</div>
</div>
</section>? 关键点说明：min-vh-100 应用于 <section>，确保其占据完整视口高度；d-flex align-items-center justify-content-center 直接作用于 section，使内部 container 在视口中心定位；内部 .row 使用 justify-content-center 进一步微调列的水平分布（尤其当列宽不足时）；移除冗余类如 text-lg-start（与居中冲突）、重复 col-lg-*（如 col-lg-10 mx-auto col-lg-5 会覆盖前者）。
⚠️ 常见误区与修复
| 错误写法 | 问题 | 修正建议 |
|---|---|---|
| <section class="content" style="height: 100vh;"> | height: 100vh 在移动端可能因地址栏缩放导致高度溢出或截断 | 改用 min-vh-100 + d-flex 组合 |
| <div class="row align-items-center"> 但父容器无固定高度 | align-items-center 依赖父容器高度，否则无效 | 确保 .row 的直接父级（如 .container 或 section）有明确高度 |
| 混用 mx-auto 和 text-center 于同一元素 | 语义冲突：mx-auto 居中块级元素，text-center 居中文本，二者目标不同 | 根据需求选择——整体居中用 d-flex，文本居中用 text-center |
✅ 总结：三步完成可靠居中
- 设定高度基准：给最外层 section 添加 min-vh-100；
- 启用 Flex 居中：添加 d-flex align-items-center justify-content-center；
- 保持内容语义清晰：内部结构仍用标准 Bootstrap grid（.container > .row > .col-*），避免过度嵌套或冲突类。
这样既符合 Bootstrap 5 最佳实践，又具备良好的响应式表现和可维护性。
