align-items-center没反应是因为它只对flex容器生效，而Bootstrap 4的.row、.col等默认非flex，需给直接父容器加d-flex并设置明确高度。
为什么 align-items-center 加了没反应？
因为这个类只对 flex 容器生效，而 Bootstrap 4 的 .row、.col、.container 默认都不是 flex 容器。你直接给子元素加 align-items-center，浏览器会忽略——它不是作用于子元素的“居中指令”，而是声明“我在本 flex 容器里垂直居中”。
常见错误现象：
– 页面完全没变化
– 开发者工具里看到元素的 display 仍是 block
– 子元素反而被挤到顶部或错位
- 必须给**直接父容器**加
d-flex（Bootstrap 4 提供的 flex 启用类） - 如果父容器是
.col-md-6这类栅格列，它默认只是块级元素，d-flex不会自动继承，必须显式添加 -
d-flex会覆盖掉某些旧样式（比如text-center对块级子元素的水平居中效果），需要额外补justify-content-center或保留text-center
父容器高度为什么必须手动设？
Flex 的 align-items: center 需要一个明确的高度参照系。如果父容器高度是 auto（比如靠内容撑开），那它实际高度就等于子元素高度，“居中”就退化成“顶着顶部显示”，根本看不出来。
真实项目中最常漏掉的三件事：
– 父容器没设 min-height 或 height
– 所有祖先元素都没设高度，导致 height: 100% 链路中断
– 移动端 Safari 下 100vh 会因地址栏隐藏/显示动态变化，造成跳动
立即学习“前端免费学习笔记（深入）”；
- 优先用
min-height: 100vh，不是height: 100vh：内容超出一屏时不会被截断 - 如果父容器有
padding或border，记得确认是否用了box-sizing: border-box，否则实际高度会超预期 - 响应式场景下，可用
min-height-sm-100vh等断点类控制不同尺寸下的行为（需自行扩展或配合媒体查询）
my-auto 和 align-items-center 到底该用哪个？
它们作用对象和生效条件完全不同：my-auto 是 margin 工具类，只对**单个元素自身**生效；align-items-center 是 flex 容器的属性，影响**所有直接子元素**的交叉轴对齐。
典型误用：
– 给一个 <p> 加 my-auto，但它的父容器只是普通 <div>（非 flex），结果 margin 确实设成了 auto，但浏览器按块级规则解析为 0
– 在非 flex 的 .container 里用 my-auto，完全无效
- 想让多个子项整体垂直居中 → 给父容器加
d-flex align-items-center - 只想让某一个按钮/图片在已有高度的容器里上下居中 → 先确保父容器是
d-flex，再给该子元素加my-auto -
my-auto在 flex 容器中等价于margin-top: auto; margin-bottom: auto，不改变主轴方向，也不影响其他子项
响应式垂直居中怎么避免断层？
Flex 工具类在 Bootstrap 4 中不支持断点前缀（比如没有 align-items-sm-center），这是 v5 才引入的。v4 里要么全量启用，要么手动写媒体查询。
最容易被忽略的嵌套陷阱：
– 你给外层 <div class="d-flex align-items-center"> 加了类，但中间插了一个没加 d-flex 的包裹层（比如 <div><div>...</div></div>），flex 上下文就断了，内层子元素完全不受控
- 检查 DOM 结构：目标元素的**直接父容器**是否同时具备
d-flex和明确高度 - 如需差异化响应行为，用媒体查询覆盖：例如
@media (max-width: 768px) { .parent { min-height: 50vh; } } - 慎用
flex-direction: column：Bootstrap 4 没提供flex-column工具类，得手写，且会改变主轴方向，影响justify-content行为
d-flex”或“高度没撑开”这两步。别跳过检查 computed styles 里的 display 和 height 值——它们比代码更诚实。 
