align-items-center 不起作用是因为父容器未设 d-flex 且缺乏高度上下文；必须配合 d-flex 和 min-vh-100 才生效，且仅对直接子元素有效，需确保 flex 上下文完整、高度明确。
align-items-center 没反应？不是类写错了，是父容器没设 d-flex，也没给高度上下文——Bootstrap 5 的 Flex 工具类必须在真正的 flex 容器里才生效。
为什么 align-items-center 不起作用
这个类只对直接子元素生效，前提是父容器已声明 display: flex（即加了 d-flex），且自身有明确高度。常见失效场景：
-
.row默认是 flex 容器，但若外层.container高度为auto，整个.row渲染高度就等于内容高度，“垂直居中”自然变成贴顶 - 在
.card或.navbar上直接加align-items-center，但没加d-flex—— 这些组件默认不是 flex 容器 - 中间嵌套了一层没加
d-flex的div，导致 flex 属性链断开
d-flex 和 min-vh-100 必须成对出现
单用 d-flex 只启用布局模式，不解决空间问题；单用 min-vh-100 只撑高，不触发对齐。二者组合才是可靠起点：
-
d-flex：让容器进入 flex 上下文，使align-items-*、justify-content-*有作用域 -
min-vh-100：比h-100更稳，不依赖父级高度设置，且内容超长时不会截断 - 如果页面有固定头部，可用
min-vh-100+mt-[n]补偿，或改用d-flex flex-column布局
栅格系统里直接用 Flex 类，别绕弯
.row 本身就是 flex 容器，所以可以直接在它上面加 align-items-center、justify-content-between 等类，无需额外包一层 d-flex：
- 让两列等高对齐：
<div class="row align-items-center"> <li>让列内卡片垂直居中：<code><div class="col d-flex align-items-center justify-content-center"> <li>避免在 <code>.col里再套d-flex处理整体居中——这会让col-6的宽度计算失效，实际宽度可能缩成一指宽 -
flex-grow-1在多层嵌套中可能被父级flex-shrink: 0抑制，此时需检查 computed styles 中的flex值是否被覆盖 - 想让某个子项在 flex 容器中“占满剩余空间”，但又不想它拉伸高度，应显式设
align-self: flex-start，否则会继承align-items: stretch - 表格单元格里不要用
align-items-center——align-middle是表格专用类，只对<td> 生效，加在 <code><tr> 或内部 <code>div上都无效 真正卡住人的从来不是类名记不全，而是没意识到：每个 Flex 工具类都绑定在特定 display 模式和高度上下文里，漏掉任意一环，整条链就断了。
自定义 CSS 补位时，注意 flex 优先级和继承边界
Bootstrap 的工具类本质是原生 flex 属性的封装，但遇到复杂嵌套或特殊对齐需求时，仍需少量自定义 CSS：
