bootstrap 5 中 align-items 不起作用是因为需用 align-items-* 类而非 css 属性名；必须配合 d-flex 等启用 flex 的类，且父容器需有明确高度才能生效。
align-items 在 Bootstrap 5 中根本不起作用？
因为 align-items 是 CSS Flex 属性，不是 Bootstrap 的类名；Bootstrap 5 提供的是 align-items-* 响应式工具类，比如 align-items-center，直接写 align-items: center 在 HTML class 里当然无效。
- 必须用 Bootstrap 的类名，不能照搬 CSS 属性名
- 这些类默认作用于 flex 容器（即已设
display: flex或display: inline-flex的元素） - Bootstrap 5 的
align-items-类只影响交叉轴（cross axis），也就是垂直方向（对flex-direction: row而言） - 如果父容器没启用 Flex，加
align-items-center也没用——得先加d-flex或d-inline-flex
为什么加了 d-flex + align-items-center 还是不居中？
常见原因是父容器高度未知或未约束，导致“居中”没参照物。Flex 的 align-items 是让子元素在容器的交叉轴范围内居中，如果容器自身高度塌缩（比如只有内容高），那视觉上就看不出居中效果。
- 确保父容器有明确高度，比如
min-height: 100vh、height: 400px，或通过h-100配合父级高度传递 - 检查是否误用了
justify-content-center（它控制主轴，即水平方向），和align-items-center混用时容易搞反作用轴 - 子元素若设置了
align-self-start等覆盖类，会优先于容器的align-items - 注意响应式断点：
align-items-md-center在sm下无效，别漏掉基础断点类
align-items-center 和 align-content-center 有什么区别？
align-items-center 控制单行 flex 子项在交叉轴上的对齐；align-content-center 只在多行 flex（flex-wrap: wrap）时生效，用于对齐“行”本身，和子元素无关。
- 绝大多数居中需求只需
align-items-center+d-flex -
align-content-center必须配合flex-wrap: wrap才可见效果，否则无表现 - Bootstrap 5 中
align-content-类默认不启用，需额外引入flex-wrap工具类（如flex-wrap-wrap）才能触发 - 性能上无差异，但语义错用会导致布局意外留白或偏移
移动端适配时 align-items 失效怎么办？
不是失效，是断点类没覆盖当前视口。Bootstrap 5 的 align-items- 类默认只在 xs（无前缀）生效，sm 及以上需显式加断点前缀。
- 写成
align-items-center→ 仅xs生效；align-items-sm-center→sm+生效 - 常用组合：
d-flex align-items-center align-items-md-start（手机居中、平板左对齐） - 避免只写响应式类而漏掉基础类，比如只有
align-items-lg-center，在手机上就会回退到浏览器默认（stretch） - 用浏览器 DevTools 检查最终计算样式，确认
align-items是否被正确应用，而不是只看 class 名
实际居中往往卡在“容器没高度”和“类名写错”这两处，比语法更关键的是理解它依赖 flex 上下文和尺寸约束。
