使用 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 无效。

✅ 示例代码（优化后）

  
    
      
        
Heading
        
Centered content with responsive alignment.
      
      
        @@##@@
      
    
  

? 关键点说明：min-vh-100 应用于 ，确保其占据完整视口高度；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 会覆盖前者）。

⚠️ 常见误区与修复

✅ 总结：三步完成可靠居中

1. 设定高度基准：给最外层 section 添加 min-vh-100；
2. 启用 Flex 居中：添加 d-flex align-items-center justify-content-center；
3. 保持内容语义清晰：内部结构仍用标准 Bootstrap grid（.container > .row > .col-*），避免过度嵌套或冲突类。

这样既符合 Bootstrap 5 最佳实践，又具备良好的响应式表现和可维护性。