align-items-center需作用于Flex父容器且容器需有明确高度，否则无效；text-center与justify-content-center用途不同，不可替代；图文混排时可用align-self-center或flex-direction: column解决偏高问题。
为什么只加align-items-center文字不垂直居中
因为align-items-center是容器属性，必须作用在父元素上，且父容器得是 Flex 容器（即有display: flex）。如果只给文字本身加这个类，完全无效。更关键的是：容器必须有可计算的交叉轴空间——也就是得有明确高度。常见失效场景是父<div>没设高，内部只有文字，此时容器高度 = 行高，align-items-center无处“居中”。
解决办法很简单：
- 父容器加
d-flex（Bootstrap 5 必须显式启用） - 加
align-items-center+justify-content-center（水平+垂直都要） - 确保父容器有高度：比如
h-100、min-vh-100、或内联style="height: 200px" - 若子元素是
<p>，记得加mb-0去掉默认下边距，否则会破坏视觉居中
text-center和justify-content-center能混用吗
不能直接替代，用途完全不同：text-center只是text-align: center，只影响块内行内内容的文本对齐；而justify-content-center是 Flex 主轴居中，控制子元素整体位置。比如一个<div class="d-flex"><span>A</span><span>B</span></div>，加text-center对两个<span>毫无影响，但加justify-content-center就能把它们一起推到容器中间。
典型误用：
-
<div class="text-center align-items-center"><p>文字</p></div>→ 垂直无效，因为没d-flex，align-items-center不生效 -
<div class="d-flex text-center"><p>文字</p></div>→ 水平居中靠的是 Flex 布局本身，text-center多余且可能干扰其他内联子元素
多行文字或图文混排时align-items-center为什么看起来偏高
因为align-items-center对齐的是每个子元素的内容框中心线。当容器里有图标（<svg>）和文字并排时，SVG 的 content box 中心往往比文字基线高，结果就是图标“压着”文字顶部，视觉上像文字被顶上去了。
这时别硬调margin-top或vertical-align，推荐两种解法：
- 改用
align-self-center单独加在文字元素上（前提是父容器已是d-flex） - 把图文结构改为
flex-direction: column+justify-content-center，让文字在纵轴上独立居中 - 若必须横排，用
gap代替margin，避免因外边距塌陷导致对齐偏移
响应式场景下大屏两端对齐、小屏居中怎么写
Bootstrap 不提供text-lg-justify以外的“两端对齐”响应式类，而且它只对多行、含空格的段落有效——单行标题或中文短文本基本没效果。别指望text-lg-start或text-lg-end能凑出两端对齐。
正确写法是断点覆盖策略：
- 先写
text-center（默认对 xs 及以上生效） - 再叠加
text-lg-justify（覆盖 lg 及以上断点） - 完整类名：
class="text-center text-lg-justify" - 注意：如果项目改过
$grid-breakpoints，确认lg起始宽度是否仍是 992px；否则对齐断点会错位
复杂点在于，text-lg-justify依赖浏览器原生的text-align: justify行为，遇到英文长单词、中文无空格、或行宽不足时，末行大概率左对齐——这不是 Bug，是 CSS 规范使然。真要强控两端，得用 JavaScript 插件或换行符干预，但那就超出 Bootstrap 工具类范畴了。
