bootstrap 4/5 的 col 默认不垂直居中，因为 .row 虽为 flex 容器但 align-items 默认为 stretch；需显式添加 align-items-center 或在 .col 内用 d-flex align-items-center，并确保父容器有足够高度或使用 min-height 提供对齐空间。
Bootstrap 4/5 的 col 为什么默认不垂直居中
因为 Bootstrap 的栅格列（col）本质是 display: block 元素，父容器 .row 默认也不是 flex 容器——哪怕你用了 Bootstrap 4+，.row 虽然内部用了 flex，但它的 align-items 默认是 stretch，不是 center。所以子列高度不一致时，文字或按钮看起来就“错位”了。
常见错误现象：col-6 里放一个短文本、另一个放带图标的长按钮，两列顶部对齐但底部参差；或者用 mt-auto 想推到底部，结果没反应——因为父级没设成 flex 主轴方向可控制的上下文。
- 必须确保父级
.row是 flex 容器（Bootstrap 4+ 默认是，但检查是否被重写过display） - 直接在
.row上加align-items-center（垂直居中）或align-items-end（底对齐） - 如果只对某几个列生效，别改
.row，改对应.col自身：加d-flex align-items-center，再包一层div或直接让内容容器具备 flex 属性 - 注意
align-items控制的是交叉轴（对.row来说是 y 轴），别和justify-content混淆
用 align-items-center 后内容还是偏上？检查 height 和 min-height
Flex 对齐依赖“可用空间”。如果某列内容少、自身高度小，而 .row 没有设定最小高度，浏览器会按内容撑开，align-items-center 就没空间可居中。
使用场景：卡片式布局、表单左右两栏、图文混排侧边栏。
- 给
.row加min-height: 100vh（全屏高）或固定值如min-height: 200px，让对齐有参照 - 避免给
.col设height: 100%，它不会继承父 flex 容器的高度，除非父级明确设了height - 更稳妥的做法：在需要居中的列里，用
d-flex flex-column justify-content-center，把对齐逻辑下沉到列内部，不依赖整行高度 - 如果列内是单行文本，
line-height和padding也会影响视觉居中感，别只盯着 flex
Bootstrap 3 怎么办？没有 align-items- 工具类
Bootstrap 3 的 .row 是 float 布局，原生不支持 flex 对齐。硬加 display: flex 会破坏栅格行为（比如 col-md-6 不再自动换行、负 margin 失效）。
性能影响小，但兼容性风险明确：IE9 及以下完全不可用；Android 4.3 WebView 有 flex bug。
- 最简方案：放弃 row 级对齐，在每个
.col内手动加 wrapper，用position: relative+position: absolute; top: 50%; transform: translateY(-50%) - 不推荐全局覆盖
.row为 flex，会导致响应式断点失效（@media下的float规则不会自动适配 flex） - 如果项目已用 PostCSS 或构建工具，可加 Autoprefixer 并启用
flexbox: legacy模式，但仅限简单场景 - 升级到 Bootstrap 4+ 是长期解，3 的维护早已结束，官方也不再修 layout 类 bug
justify-content-between 在列内失效？可能是嵌套层级错了
想让一列里的两个按钮左右撑开，加了 justify-content-between 没反应——大概率是因为这个 class 被加在了非 flex 容器上，比如直接加在 .col（默认 block），而不是它内部的 div。
参数差异：justify-content 只在主轴（.row 是 x 轴，.col 内部设 flex-direction: column 后就是 y 轴）起作用。
- 确认目标元素已设
d-flex（即display: flex） - 水平分布用
justify-content-start / center / end / between / around / evenly - 垂直分布需先设
flex-direction: column，再用justify-content控制 y 轴 - 别在
.row上同时用justify-content-between和align-items-center处理复杂对齐，容易互相干扰；优先拆到列内部处理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
