必须将 justify-content- 和 align-items- 加在 .row 上，因为它是 bootstrap 5+ 中唯一默认 display: flex 的容器，且这些类仅作用于其直接子元素（.col）；加在 .col 上只能控制列内内容对齐，无法实现整列在行内的居中。
直接给 .row 加 justify-content-center 和 align-items-center，再配合断点前缀（如 justify-content-md-center），但必须确保该 .row 是 Flex 容器且有足够高度——否则垂直对齐无效。
为什么 justify-content-* 和 align-items-* 必须加在 .row 上
.row 是 Bootstrap 栅格中唯一默认为 display: flex 的容器（Bootstrap 5+），justify-content-* 控制主轴（水平）对齐，align-items-* 控制交叉轴（垂直）对齐，二者都只作用于它的直接子元素（即 .col）。加在 .col 上只会控制列内内容，不是“行内列的居中”。
常见错误包括：
- 把
justify-content-center加在.col上，结果是列内文字居中，而非整列在行中居中 - 漏掉
d-flex—— 虽然.row默认是 flex，但若被自定义 CSS 覆盖（比如写了display: block），就必须显式加d-flex
断点类名怎么写才生效
Bootstrap 的响应式对齐工具类命名规则统一为：justify-content-{breakpoint}-{value} 和 align-items-{breakpoint}-{value}，其中 {breakpoint} 是 sm、md、lg 等，{value} 是 start、center、end 等。
例如：
-
justify-content-md-center：仅在md及以上断点水平居中 -
align-items-lg-center：仅在lg及以上断点垂直居中 -
justify-content-sm-start justify-content-md-center：小屏左对齐，中屏及以上居中
注意：justify-content-center（无断点）会作用于所有尺寸；一旦加了断点前缀，其他尺寸下就回退到默认行为（justify-content-start）。
垂直对齐失效的三个真实原因
align-items-center 不会“撑高”容器，它只在已有高度空间里分配位置。如果 .row 高度由内容撑开（比如只有两行文字），那“居中”就等于没效果。
必须检查并满足以下任一条件：
- 父容器加
min-vh-100（推荐，全屏场景最稳） - 整条继承链加
h-100（.container→.row→ …），但任意一级漏掉都会断链 - 给
.row显式设min-height: 400px或类似值（不推荐响应式场景）
特别提醒：固定导航栏遮挡时，用 min-vh-100 不够，得写 min-height: calc(100vh - 60px)（60px 替换为导航实际高度）。
单列居中 vs 整行居中，别混用
如果目标只是让某一个 .col 在行内水平+垂直居中（其余列保持默认顶部对齐），不要动 .row 的 align-items，而是：
- 给该
.col加d-flex align-items-center justify-content-center - 确保该
.col有明确高度参照（比如父.row已设min-vh-100） - 避免同时用
mx-auto—— Flex 项目下margin: auto水平方向会被justify-content覆盖
真正容易被忽略的是：align-items-center 在 .row 上只管“列的位置”，不管“列里图片或卡片的位置”。要精确控制内部元素，就得下沉一层到 .col 做 d-flex 布局。
