text-center在小屏不居中是误解，实际它等价于text-xs-center，从xs断点起全局居中；要实现“小屏居中、大屏左对齐”，须用text-center text-md-start组合，按断点升序书写以确保css层叠覆盖。
text-center 为什么在小屏不居中
因为 text-center 等价于 text-xs-center，它从最小断点（xs）起就生效，且不会“自动退回到左对齐”。一旦加上，所有尺寸都居中——这不是 bug，而是设计逻辑。想实现“小屏居中、大屏左对齐”，不能只靠一个类，必须用断点组合覆盖。
正确写法：用 text-{breakpoint}-{align} 组合控制响应式对齐
Bootstrap 5 的响应式文本类按“最小宽度生效”规则匹配，高断点类会覆盖低断点类，但前提是显式写出多个类。常见有效组合：
-
text-center text-md-start：小屏（ -
text-start text-lg-center：默认左对齐，≥lg（992px）才居中 -
text-sm-center text-xl-end：sm 起居中，xl 起右对齐（注意中间断点未覆盖，会继承 sm 的行为）
别写 text-md-right——Bootstrap 5 已废弃 right/left，必须用 text-md-end 和 text-md-start。
Flex 容器里 text-center 失效的典型场景
当文字父容器加了 d-flex、justify-content-between 或任何 Flex 类时，text-center 基本无效。原因很直接：Flex 子元素的水平位置由父容器的 justify-content 控制，text-align 只作用于块级流内元素。
此时要居中单行文字，应：
- 确保父容器有
d-flex+justify-content-center - 若需同时垂直居中，再加
align-items-center - 避免给父容器同时加
d-flex和text-center，后者会被忽略且掩盖布局意图
Card 标题居中失败？先检查父容器是否偷偷设了 text-align
比如在 <div class="card-header"> 上写了 <code>text-center，那里面的 <h5 class="card-title"></h5> 即使加了 text-md-start 也可能被强制继承居中。浏览器 computed 样式里 text-align 的来源才是关键。
解决办法很简单：
- 把对齐类直接加到标题标签上（如
<h5 class="card-title text-center text-md-start"></h5>） - 移除父容器的
text-center或内联style="text-align:center" - 别混用冲突组合，例如
text-center text-md-start是对的，但text-center text-md-center就是冗余且无意义的
真正容易被忽略的是：响应式类的层叠依赖于断点定义和类名顺序，而失效往往发生在父容器的 display 类型或 text-align 覆盖上，不是类名拼错了。
