最稳妥做法是给.col加d-flex和align-items-center，单行文字无需flex-column，多行或需上下居中则加justify-content-center flex-column；切勿在.row上直接用align-items-center期望文字居中。
用 align-items-center 配合 flex-column 或直接设容器为 flex
Bootstrap 5 默认的 .col 是块级元素，不支持垂直居中；必须让列本身或其父容器成为 flex 容器。最稳妥的做法是给列（.col）加 d-flex + align-items-center，再根据内容方向决定是否加 flex-column：
- 单行文字：加
d-flex align-items-center即可，无需flex-column - 多行文字或需要上下居中布局：加
d-flex align-items-center justify-content-center flex-column - 若列内还有其他块级子元素（如按钮、图片），注意默认
align-items: center会影响所有子项的横向对齐，必要时用text-center单独控制文字
别在 .row 上直接用 align-items-center 然后指望文字居中
很多人试过给 .row 加 align-items-center，发现文字没动——因为 align-items 控制的是“行内各列（.col）”的交叉轴对齐，不是列里文字的对齐。它会让所有 .col 在 row 高度内垂直居中，但每个列内部仍是普通文档流，文字仍贴顶。
- 错误写法：
<div class="row align-items-center"><div class="col">文字</div></div>→ 列居中了，文字还在列顶部 - 正确路径：居中目标是文字 → 居中动作必须落在文字的**直接父容器**上（通常是
.col） - 如果 row 高度由内容撑开，
align-items-center可能无视觉效果；建议给 row 设明确高度（如min-height: 200px）再测试
兼容老项目？Bootstrap 4 要手动加 h-100
Bootstrap 4 的 .col 默认高度不继承父容器，即使加了 d-flex align-items-center，列本身高度可能只有内容高，导致“居中”失效。必须显式让列占满父容器高度：
- 在
.col上同时加h-100（需父容器有高度） - 或者给
.row加h-100，再给.col加d-flex align-items-center - Bootstrap 5 默认
.col会响应父容器高度，一般不用h-100，但若嵌套在非 flex 容器中（比如<td>），仍可能需要
纯文字场景下，line-height 是快捷但危险的替代方案
如果只是单行短文本、且列高度固定，有人用 style="line-height: 200px;" 强制拉伸行高来模拟居中。这确实快，但问题明显：
- 响应式失效：屏幕变窄时文字换行，
line-height会让行间距巨大，排版崩坏 - 无法与 padding/margin 协同：容易造成上下溢出或点击区域错位
- 语义错误：用行高实现布局，违背 CSS 设计本意，后续维护成本高
- 真正该用 flex 的地方，硬套
line-height就像用锤子拧螺丝——能转，但迟早打滑
垂直居中的关键从来不是“怎么让文字看起来在中间”，而是“让文字的父容器具备明确的高度和 flex 布局能力”。漏掉 d-flex 或忘了高度继承，再多的 class 堆砌都没用。
