align-items-center 无效是因为父容器未设为 flex；必须先给直接父容器加 d-flex，再确保其有明确高度（如 min-vh-100），且注意 my-auto 与 align-items-center 的作用对象差异。
align-items-center 加了没反应，是因为父容器不是 flex 容器
这个类只对 display: flex 或 display: inline-flex 的元素生效，而 Bootstrap 的大多数容器（比如 .row、.col、.card）默认是 display: block。你直接给子元素加 align-items-center，或者给一个非 flex 父容器加，它就完全不工作。
常见错误现象：
- 浏览器开发者工具里看到该父元素的 computed
display仍是block - 内容毫无变化，或反而错位（比如文字缩到左上角）
必须做的第一步：找到要居中的子元素的**直接父容器**，给它加上 d-flex。只有这时 align-items-center 才有作用对象。
父容器高度为 auto，等于没写居中
即使加了 d-flex align-items-center，如果父容器高度是 auto（比如靠内容撑开、没设 min-height 或 height），那“垂直居中”就没有参照空间——它会把子元素放在“刚好包住内容”的那个高度里居中，视觉上还是顶着顶部。
解决方式取决于场景：
- 全屏居中：
min-vh-100（Bootstrap 5）或style="min-height: 100vh;"（Bootstrap 4） - 卡片内居中：
min-height: 200px或类似固定值加在.card-body上 - 导航栏 Logo 居中：确保
.navbar本身有足够高度（检查padding和line-height是否被覆盖）
别依赖 height: 100%——它只在父级有明确高度时才有效，容易形成隐式依赖链。
my-auto 和 align-items-center 不是一回事
my-auto 是 margin 工具类，只作用于单个元素自身；align-items-center 是 flex 容器的对齐行为，影响所有直接子项。用错的典型表现：
- 给一个
<p></p>加了my-auto，但父容器只是普通<div>，结果上下 margin 被解析为 0 <li>在非 flex 的 <code>.container里用my-auto，完全无效 - 在 DevTools 中逐层检查父容器的
display和height计算值 - 临时删掉
vertical-align看是否立刻错位（尤其在.navbar-brand里混排<img>和文字时） - 折叠态（
.navbar-collapse）下不要硬塞d-flex——垂直流布局下它没意义，反而增加渲染开销
想让多个子项整体垂直居中 → 用 d-flex align-items-center 在父容器上
只想让某一个子项（比如按钮）在已有高度的容器里上下居中 → 确保父容器是 d-flex，再给该子项加 my-auto
响应式断点和嵌套容器容易漏掉
align-items-center 只对直接子元素生效；如果中间嵌套了未加 d-flex 的容器（比如一个 <div> 没处理），就会断掉。另外，Bootstrap 提供了断点类如 <code>align-items-sm-center，但很多人只写了 align-items-center，在小屏下失效却没察觉。
调试建议：
真正容易被忽略的是：flex 居中依赖父容器的高度上下文，而这个高度常常被 margin 折叠、浮动残留或未闭合标签悄悄吃掉。
