align-items-center没反应是因为它只对flex容器生效，父容器必须加d-flex且有明确高度（如min-vh-100），否则无参照系；my-auto仅在flex父容器中对单个子元素有效。
为什么加了 align-items-center 却没反应
因为这个类只对 flex 容器本身起作用，不是“让子元素居中”的开关。它要求父容器必须是 flex 上下文，且有明确高度参照系。
- 先给直接父容器加
d-flex，否则align-items-center完全无效 - 父容器若本身是栅格列（如
col-md-6），默认仍是display: block，必须显式加d-flex - 如果父容器高度是
auto（比如没设min-height或固定高），那“垂直居中”就失去计算基准，视觉上还是贴顶 - 浏览器开发者工具里检查该父容器的
computed display，如果不是flex，说明d-flex没生效或被覆盖
my-auto 和 align-items-center 到底该用哪个
二者行为完全不同，不能互换。
-
align-items-center是容器级声明，影响所有直接子项在交叉轴上的对齐方式 -
my-auto是单个元素的 margin 工具类，仅在父容器为 flex 或 grid 时才真正生效；等价于margin-top: auto; margin-bottom: auto - 想让多个子项整体垂直居中 → 给父容器加
d-flex align-items-center - 只想让某一个按钮或卡片在已有高度的容器里上下居中 → 确保父容器是
d-flex，再给该子元素加my-auto - 给普通
div里的p加my-auto，但父容器没d-flex？那auto会被解析为0，毫无效果
栅格系统里怎么用 Flex 类
Bootstrap 4 的 .row 默认不是 flex 容器，这点和 v5 不同。
- 要让 .row 内的列等高或垂直对齐，必须加
d-flex—— 例如：<div class="row d-flex"> - 列（
.col-*）必须是.row的**直接子元素**，嵌套一层div就会破坏align-items: stretch的等高逻辑 - 常见干扰：列内图片没设
max-width: 100%、用了position: absolute、或显式写了height/min-height，都会导致等高失效 -
.row上慎用overflow: hidden，它会裁掉拉伸后超出的部分，让“等高”看起来消失了
响应式 Flex 类怎么写才不踩坑
断点类名顺序和覆盖逻辑容易出错，尤其在多设备适配时。
立即学习“前端免费学习笔记（深入）”；
- 响应式 Flex 类必须按 Bootstrap 断点顺序写：
d-md-flex d-lg-none，而不是反过来 -
d-flex本身无断点，若只在中屏以上启用 flex，要用d-md-flex，别漏掉md -
flex-column在小屏竖排、大屏横排？写成flex-md-row flex-lg-column是错的——方向类也需带断点前缀：flex-md-row flex-lg-column合法，但flex-row flex-lg-column会导致小屏也横排 - 避免混用
.col-*和flex-grow-1在同一行：前者基于 12 栅格，后者靠 flex 分配剩余空间，行为冲突
d-flex 加了，但父容器没高；类名写对了，但子元素嵌套太深。Flex 不是魔法，它严格依赖 DOM 层级和 CSS 计算链。 
