flex容器必须设置display: flex才能实现文字垂直居中，align-items: center是容器属性且需配合明确高度，bootstrap中需手动添加d-flex和h-100等类。
Flex容器必须设置 display: flex
文字垂直居中不是靠文本样式本身实现的，而是靠父容器启用 Flex 布局并控制对齐方式。如果只给文字加 align-items: center 却没开 display: flex，完全无效。
常见错误是只写子元素样式，比如：.text { align-items: center; } —— 这毫无作用，align-items 是容器属性，必须作用在父级上。
- 确保父容器有
display: flex（或display: inline-flex） - Bootstrap 5 默认不自动设
display: flex，需手动添加类d-flex - 若用 Bootstrap 4，同样要加
d-flex；仅靠text-center或align-middle无法垂直居中
align-items: center 是核心，但需配合高度上下文
align-items: center 在 Flex 容器中让所有子项（包括文字）在交叉轴（默认为纵轴）居中。但它依赖容器有明确的高度或可计算的“可用空间”。
典型失效场景：父容器高度为 auto，且内部只有文字——此时容器高度等于文字行高，没有“可居中”的余量。
- 解决方法：给父容器设固定高度（如
h-100、min-height: 200px）或使用vh单位 - Bootstrap 中常用
h-100+min-vh-100组合确保撑满视口 - 避免只用
align-items: center而忽略容器尺寸——这是最常被忽略的前提条件
单行文字推荐用 justify-content: center + align-items: center
如果目标是文字在 Flex 容器里**水平+垂直同时居中**（比如卡片标题、按钮文案），两个属性要一起用：
<div class="d-flex justify-content-center align-items-center h-100"> <p class="mb-0">居中文字</p> </div>
注意：mb-0 是为了消除 <p></p> 默认的下边距，否则会破坏垂直居中效果。
-
justify-content: center控制主轴（默认横轴）居中 -
align-items: center控制交叉轴（默认纵轴）居中 - Bootstrap 类名对应关系：
justify-content-center/align-items-center - 不要用
text-center替代justify-content-center，前者只影响文本对齐，不改变 Flex 布局中的位置
多行文字或需要基线对齐时，慎用 align-items
当文字换行、或容器内含图标+文字等混合内容时，align-items: center 会让整块内容按容器中心对齐，但可能造成视觉偏差——比如图标顶部与文字中线对齐，看起来像“偏高”。
这时更稳妥的方式是用 align-self: center 单独控制文字元素，或改用 flex-direction: column + justify-content: center。
- 多行文字建议包裹一层
<span></span>或<div>，再对其应用 <code>align-self: center - 避免对
<p></p>直接设align-self后又让它继承父容器flex: 1，容易引发高度塌陷 - 真正复杂的垂直对齐（如图标+多行说明文字底部对齐），
align-items: flex-end或margin-auto可能比纯 Flex 更可控
实际项目里，90% 的“垂直居中失败”都卡在容器没高度或没开 Flex；剩下那 10%，多数是因为混淆了文本对齐和布局对齐的概念。把
d-flex、h-100、align-items-center 这三个要素凑齐，再检查有没有干扰边距，基本就稳了。
