bootstrap垂直居中核心是父容器需设d-flex、align-items-center及明确高度（如min-vh-100）；若computed height为0或非flex容器（如未加d-flex的.row），则必然失效。
Bootstrap 弹性布局垂直居中，核心就一条：父容器必须加 d-flex 和 align-items-center，且自身要有明确高度（比如 min-vh-100）；漏掉 d-flex 或父容器高度为 0，就一定不生效。
为什么加了 align-items-center 还是不居中？
90% 的失效源于父容器没有可参与对齐的垂直空间。Flex 的 align-items-center 不会“撑高”父容器，它只在已有高度内做对齐计算。
- 用浏览器 DevTools 查看父容器的 computed height，不是看 class 名——如果显示
0px或auto，那居中必然无效 -
h-100依赖父级已设高度，链路一断就塌；min-vh-100更可靠，直接占满视口高度 - 如果父容器是
.row，它默认不是 flex 容器，必须显式加d-flex，否则align-items-center完全被忽略 - 自定义 CSS 覆盖了
display: flex（比如写了display: block !important），也会让整个 flex 行为失效
怎么给 .row 里的 .col 垂直居中？
两种常见场景要分开处理：
- 想让整行所有列在
.row高度内垂直居中 → 给.row加align-items-center（同时确保.row有高度，如min-vh-100） - 只想让某一个
.col内部内容居中（其他列保持顶部对齐）→ 在该.col上加d-flex align-items-center justify-content-center，而不是动.row - 别用
align-self-center试图控制列内文字——它只让整列在行内居中，不作用于列内部子元素
Grid 方案 place-items-center 更简洁？
Bootstrap 5.3+ 支持 d-grid place-items-center，一行代码同时搞定水平 + 垂直居中，语义更直白，但要注意限制：
- 它本质是
display: grid; place-items: center，不能单独只垂直居中，也不能控制子项换行或顺序 - IE 完全不支持，不过 Bootstrap 官方已放弃 IE，现代项目可放心用
- 如果父容器本身已是 flex 布局（比如用了
d-flex），再加d-grid会覆盖 display 类型，导致原有 flex 行为丢失 - 多个子元素时，
place-items-center是整体居中，不像my-auto只作用于单个元素
哪些写法看着像、其实根本不行？
这些是高频误用，务必避开：
-
text-center：只影响行内内容水平对齐，对垂直方向零作用 -
vertical-align: middle：对块级元素无效，强行配display: table-cell语义错、兼容差、维护难 -
position: absolute; top: 50%; transform: translateY(-50%)：脱离文档流，响应式下极易错位，尤其和 Bootstrap 网格混用时 - 在
<p></p>上直接加d-flex align-items-center：<p></p>默认无高度，flex 对齐无参考基准
真正容易被忽略的点是：垂直居中永远发生在「父容器高度确定之后」。哪怕你把所有 class 都写对了，只要父容器 computed height 是 0，结果就是没变化——先查高度，再调样式，比反复试 class 有效得多。
