父容器必须加 d-flex 才能使 align-items-center 生效，因其仅作用于 flex 容器本身；需确保父容器有明确高度、是 flex 上下文，并根据需要补充 text-center 或 justify-content-center。
父容器必须加 d-flex，否则 align-items-center 不生效
很多人直接给子元素加 align-items-center，结果毫无反应——这个类只对 flex 容器本身起作用，不是“让子元素居中”的指令，而是“让子元素在本容器内垂直居中”的声明。所以第一步永远是：找到要居中的那个元素的**直接父容器**，给它加上 d-flex。
常见错误现象：
– 页面没变化，或子元素反而错位
– 浏览器开发者工具里看到该元素 computed styles 中 display 仍是 block
- Bootstrap 4 没有
flex-column工具类（那是 v5 才加的），如需竖排主轴，得手动加flex-direction: column - 如果父容器本身是 Bootstrap 栅格列（如
col-md-6），它默认不是 flex 容器，必须显式加d-flex，不能依赖栅格系统自动触发 flex -
d-flex会覆盖掉某些旧样式（比如text-center对块级子元素的居中效果），注意检查是否需要补justify-content-center或text-center
align-items-center 和 my-auto 的适用场景完全不同
align-items-center 是 flex 容器的对齐行为，影响所有直接子项；my-auto 是 margin 工具类，只作用于单个元素自身，且**仅在父容器是 flex 或 grid 容器时才真正有效**。
用错的典型表现：
– 给一个 p 加了 my-auto，但父容器只是普通 div，结果上下 margin 确实设成了 auto，但因无 flex 上下文，auto 被解析为 0
– 在非 flex 的 .container 里用 my-auto，完全无效
- 想让多个子项整体垂直居中 → 用
d-flex align-items-center在父容器上 - 只想让某一个子项（比如按钮）在已有高度的容器里上下居中 → 确保父容器是
d-flex，再给该子项加my-auto -
my-auto在 flex 容器中等价于margin-top: auto; margin-bottom: auto，但它不改变主轴方向，也不影响其他子项布局
高度上下文缺失是 90% 垂直居中失败的根源
即使写了 d-flex align-items-center，如果父容器高度是 auto（比如内容撑开、没设 min-height），那“垂直居中”就失去了参照系——它会把子元素放在“刚好包裹内容”的那个高度里居中，视觉上还是顶着顶部。
真实项目中最常被忽略的点：
– 父容器有 padding 或 border，但没用 box-sizing: border-box，导致实际高度超出预期
– 使用了 height: 100%，但所有祖先元素都没设高度，链路断在某一级
– 移动端 Safari 下 100vh 因地址栏收放跳变，造成居中位置闪烁
- 优先用
min-vh-100（Bootstrap 4.5+ 支持）或min-height: 100vh，比height: 100vh更安全 - 如果容器内容可能超长，绝对不要用
height: 100vh，否则底部内容会被截掉 - 动态插入的 DOM（如 JS 创建的弹窗）要等挂载完成、浏览器重排之后再触发布局，否则 height 计算不准
文字换行后看起来“没居中”，其实是文本对齐没处理
align-items-center 居中的是整个元素盒子，不是盒子里的文字。当子元素是 p 或 span 这类内联内容，它的文本默认仍按 text-align: left 渲染，多行时就会出现“盒子居中了，但文字左对齐”的错觉。
典型症状：
– 单行文本看着正常，换两行就明显偏左
– 按钮或卡片居中没问题，但里面一段说明文字就是不对劲
- 解决方案很简单：给文字容器额外加
text-center类 - 如果容器本身是块级且需要水平居中（比如标题 + 描述组合），可以加
justify-content-center（配合d-flex） - 别试图在 flex 容器里对
p加margin: auto—— 它只对块级子元素生效，而p默认是块级，但margin: auto水平方向有效、垂直方向无效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
