正确组合是 text-center text-md-start，实现小屏居中、大屏左对齐；bootstrap 5.x 断点为 mobile-first，text-center 默认作用于 xs 及更宽断点，text-md-start 从 md 起覆盖之，无需额外 css 或 js。
text-center text-md-start 是正确组合
直接写 text-center text-md-start 就能实现小屏居中、大屏左对齐。Bootstrap 5.x 的断点类是 mobile-first，text-center 默认作用于 xs（≤576px）及所有更宽断点，text-md-start 从 md（≥768px）起生效并覆盖它——这不是“叠加”，而是“覆盖”。你不需要额外 CSS 或 JS。
-
text-sm-center text-md-start错误：sm 断点（576–767px）会居中，但 xs（ -
text-md-start单独用：md+ 左对齐，但 xs/sm 没定义，仍是左对齐，不符合“小屏居中”需求 - 类必须加在包裹标题的容器上，比如
card-header或自定义div，而不是直接加在card-title标签上——因为card-title本身不继承文本对齐控制逻辑
别把对齐类加在 flex 容器里
如果父容器（如 card-body 或 card-header）用了 d-flex 或 justify-content-*，text-* 类会失效。Flex 子项的文本对齐由父容器主轴控制，不是靠自身 text-align。
- 要么删掉父级的
d-flex类，改用块级流 +text-center text-md-start - 要么保留 flex，改用
justify-content-center justify-content-md-start，同时确保父容器有d-flex - 检查浏览器开发者工具的 computed
text-align值，看它来源是 Bootstrap 类、父级继承，还是内联样式或自定义 CSS
验证类是否真被渲染了
90% 的“没效果”问题，其实是 DOM 里根本没出现那两个类。Vue/React 动态渲染时容易漏传 class，尤其带条件判断的场景。
- 打开浏览器开发者工具，定位到标题所在元素，确认
class属性里确实包含text-center和text-md-start - 切换设备模拟器宽度（如 400px、800px），观察对应断点下类是否被媒体查询激活
- 如果父容器有内联样式
style="text-align: center"，它会硬覆盖响应式类，优先级更高
md 断点是合理分界，别轻易换 lg
“大屏”在真实项目中通常指 ≥768px（iPad 横屏、笔记本），不是 ≥992px。用 text-lg-start 会让 768–991px 区间仍居中，违背设计意图。
- Bootstrap 默认断点：
xs（sm（≥576px）、md（≥768px）、lg（≥992px） - 手机竖屏（xs）和横屏（sm）都应居中 →
text-center覆盖这两档 - 从
md开始左对齐，符合主流响应式习惯；只有产品明确要求“仅桌面屏左对齐”，才考虑text-center text-lg-start
