垂直居中需父容器同时满足d-flex和明确高度，否则align-items-center无效；my-auto仅在flex/grid父容器中生效，单行文字需mb-0防边距偏移。
直接给父容器加 d-flex 和 align-items-center，但必须确保它有明确高度——否则垂直居中根本没参照空间。
为什么 align-items-center 加了没反应
因为这个类只对 flex 容器生效，而 Bootstrap 4 的 .row、.col、普通 <div> 默认是 <code>display: block。你给子元素或非 flex 父级加它，浏览器直接忽略。
- 检查 DevTools 中父元素的
computed display：如果不是flex或inline-flex，就说明d-flex没生效 - 别在
.card或.container上直接加align-items-center——它们不是 flex 容器，得先加d-flex -
.navbar-brand里放<img>和文字时，即使外层加了d-flex align-items-center，若内部没统一display行为，仍会因vertical-align: baseline错位
父容器必须有明确高度才能居中
Flex 垂直居中不是“把元素往上推”，而是“在可用交叉轴空间里居中”。如果父容器高度是 auto（比如只靠文字撑开），那它的“可用空间”就等于内容高度，视觉上还是贴顶。
- 全屏场景用
min-vh-100（Bootstrap 4 需自行定义，或写style="min-height: 100vh;"） - 卡片内居中：给
.card-body加min-height: 200px或h-100（前提是祖先链上所有父级都有高度） - 避免无脑写
height: 100%——它依赖每一级祖先都设了高度，一断就失效 - 移动端 Safari 下
100vh可能被地址栏压缩，优先用min-vh-100或 JS 动态修正
align-items-center 和 my-auto 别混用
这两个看起来都“让东西上下居中”，但机制完全不同：
-
align-items-center是 flex 容器的属性，作用于所有直接子项，需配合d-flex -
my-auto是 margin 工具类，等价于margin-top: auto; margin-bottom: auto，但它**只在父容器是 flex 或 grid 时才有效**；在普通div上加，auto会被解析为0 - 想让多个子项整体居中 → 父容器加
d-flex align-items-center - 只想让其中一个按钮/图片在已有高度容器里居中 → 父容器加
d-flex，再给该子项加my-auto
单行文字居中要防默认边距干扰
用 <p></p> 包文字时，它自带 margin-bottom，哪怕容器用了 d-flex align-items-center justify-content-center，也会把文字往下顶偏。
- 加
mb-0清掉下边距：<p class="mb-0">文字</p> - 更稳妥的做法是改用
<span></span>或<div>，避免语义化标签附带的样式副作用 <li>多行文字或图文混排时，<code>align-items-center可能让图标和文字基线错位，此时考虑用align-self: center单独控制文字，或换flex-direction: column+justify-content: center
真正卡住人的从来不是类名记不牢，而是忘了 flex 居中必须同时满足两个硬条件：父容器是 flex 上下文，且它得有可计算的高度——缺一不可。
