加 d-flex align-items-center 前必须确保父容器是 flex 容器且有明确高度，否则无效；my-auto 仅在 flex/grid 父容器中生效；推荐用 min-vh-100 而非 h-100 或 height:100vh。
直接给父容器加 d-flex align-items-center，再确保它有明确高度——否则一定无效。
为什么 align-items-center 加了没反应
这不是类写错了，而是它根本没生效的土壤。这个类只对 flex 容器起作用，而 flex 容器必须同时满足两个条件：display 是 flex，且交叉轴（默认是 y 轴）有可用空间。
- 父容器没加
d-flex→ computeddisplay仍是block，align-items-center被浏览器完全忽略 - 父容器高度是
auto（比如只靠内容撑开）→ 没有“中”可言，子元素会被放在一个刚好包裹内容的高度里居中，视觉上还是贴顶 - 父容器是 Bootstrap 栅格列（如
col-6）→ 默认不是 flex 容器，必须显式加d-flex，不能指望栅格系统自动触发 - 用了
my-auto但父容器不是 flex 或 grid → margin 设成了 auto，但因无弹性上下文，auto 被解析为 0
d-flex align-items-center 和 my-auto 到底该用哪个
二者作用对象和适用场景完全不同，混用反而容易出问题。
-
align-items-center是加在父容器上的，让**所有直接子元素**沿交叉轴（y 轴）居中，适合整体布局控制 -
my-auto是加在子元素自身的，等价于margin-top: auto; margin-bottom: auto，但**仅在父容器是 flex 或 grid 时才真正生效** - 想让表格在 div 里垂直居中 → 给 div 加
d-flex align-items-center justify-content-center，不是给table加my-auto - 只想让按钮在已有高度的卡片里上下居中 → 卡片加
d-flex，按钮加my-auto，其他子元素不受影响
高度怎么设才靠谱
没有高度，Flex 居中就是空中楼阁。但写死 height: 100vh 在移动端可能因地址栏缩放导致计算偏差，也容易截断长内容。
- Bootstrap 5 推荐用
min-vh-100：保证至少一屏高，又能随内容自然扩展 - Bootstrap 4 没这个类，得手动加
style="min-height: 100vh;" - 如果容器本身有
padding或border，记得检查是否用了box-sizing: border-box，否则实际高度会超出预期 - 避免用
h-100—— 它依赖父级已设高度，嵌套深时极易断裂
表格、模态框、文本这些特殊场景要注意什么
它们表面都是“居中”，底层机制却不同，强行套用同一套 class 往往翻车。
- 表格（
table）不是行内元素，vertical-align: middle对它完全无效；必须用d-flex包一层，并设好高度 - 模态框（
modal-dialog-centered）依赖.modal是 flex 容器且含align-items: center；如果你覆盖了.modal的display，它就失效 - 单行文本垂直居中，最稳是
d-flex align-items-center+h-100或固定高；别用flex-column+justify-content-center，因为前者主轴变垂直后，justify-content才管垂直，但很多人忘了补 -
align-middle这类类只对td、th有效，加在tr或外层div上毫无意义
真正卡住人的从来不是 class 名字记不牢，而是父容器有没有被你亲手设成 flex、有没有被你亲手给够高度、有没有被你亲手绕过 padding/border 的干扰——这三个动作缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
