.col上直接加d-flex无效，因其默认display:block，需在内部嵌套d-flex容器并配合h-100/min-vh-100确保高度，且注意flex-direction对align-items/justify-content作用轴的影响。
Col里直接加d-flex会失效？原因和解法
Bootstrap的.col默认是display: block，不是flex容器，所以直接在.col上加d-flex类不会让它的子元素按flex规则排布——子元素还是块级流式布局。真正起作用的是让.col内部某个容器（比如div）成为flex容器。
- ✅ 正确做法：在
.col内部套一层<div class="d-flex align-items-center justify-content-center"> - ❌ 错误写法：
<div class="col d-flex">—— 此时d-flex只改了.col自身显示方式，不影响其子元素的对齐逻辑 - 注意
.col本身有min-height: 1px和padding，若内容高度不足，align-items-center可能看起来没效果，需确保父容器（如.row）有明确高度或子元素撑开
垂直居中但不水平居中？用align-items-start/center/end
很多场景只需要垂直居中，不需要水平居中。这时候别滥用justify-content-center，它会干扰原有文本流或按钮排列。
-
align-items-center只控制交叉轴（对.col内flex容器来说，通常是Y轴），不影响主轴（X轴） - 如果
.col里只有一个按钮或标题，建议这样写：<div class="col"><br> <div class="d-flex align-items-center h-100"><br> <h3>标题</h3><br> </div><br></div>
-
h-100很关键——没有它，.d-flex容器高度为0，align-items-center无从生效
Flex方向影响垂直对齐方向？别忽略flex-direction
当把flex-direction改成column，主轴就变成Y轴，此时align-items控制的是水平对齐，justify-content才管垂直对齐——容易混淆。
- 默认
flex-direction: row（Bootstrap的d-flex默认值），align-items= 垂直居中，justify-content= 水平居中 - 若用了
flex-column，要垂直居中就得用justify-content-center，而不是align-items-center - 常见误操作：在
.col里同时加d-flex flex-column align-items-center justify-content-center，结果文字被挤到左上角——因为flex-column下align-items-center让内容居左，justify-content-center才真正垂直居中
响应式下对齐失效？检查断点类和高度继承
在col-md-6这类响应式列里，h-100不一定生效，因为父级.row在小屏下可能没高度，导致子flex容器高度塌陷。
- 解决方案一：给
.row加h-100，并确保其父容器（如.container）也有高度约束 - 解决方案二：用
min-vh-100替代h-100，强制占满视口高度（适合全屏卡片布局） - 避免在
col-sm-12 col-md-6上直接套d-flex，应始终在内部封装一层flex容器，否则不同断点下padding和宽度变化会让对齐“跳动”
h-100或min-vh-100这层高度继承——Flex对齐需要明确的容器尺寸才能计算居中位置，而Bootstrap的栅格本身不提供高度约束。 
