text-center仅使列内行内内容水平居中，不能使.col在.row中居中；要居中列需用mx-auto或justify-content-center，文字居中才用text-center。
text-center 只会让列内文本内容（或行内元素）水平居中，不会让 .col 本身在父 .row 中居中。这是最常见的误解起点。
为什么 text-center 对列容器没用
text-center 实际设置的是 text-align: center，它只影响块级容器内部的**行内内容流**（比如文字、<span>、<img> 默认为 inline）。而 .col 是 flex item（Bootstrap 5+ 的 .row 是 display: flex），它的对齐由父容器的 justify-content 控制，和子元素的 text-align 无关。
常见错误现象：
给 <div class="col text-center">Hello</div> 加 text-center，发现 “Hello” 居中了，但整个灰色背景的列还是紧贴左边——因为列本身没动。
- 想让整列在 row 中居中？用
mx-auto（Bootstrap 4/5）或justify-content-center在 row 上 - 想让列内文字居中？
text-center确实管用，但仅限于此 - 列宽不够 12？
mx-auto才能真正让它“悬浮”在中间；单纯text-center不会改变列的位置
mx-auto 是最直接的列居中方式
对单个列元素加 mx-auto，相当于设置 margin-left: auto; margin-right: auto，前提是它得是块级或 flex item 且宽度明确（.col 满足）。
示例：
<div class="row"> <div class="col-6 mx-auto">这个列会水平居中</div> </div>
注意点：
- 别在
.col上同时写col-6 col-8这类冲突类，后者会覆盖前者，宽度可能意外变成 8 列，导致居中失效 -
mx-auto在 Bootstrap 4+ 有效；Bootstrap 3 需用col-md-offset-3（偏移 3 列）模拟 - 如果列用了
flex-grow-1或设了width: 100%，mx-auto就不起作用——它依赖“有明确宽度且未占满”的前提
响应式场景下避免 text-center 覆盖断点
text-center 等价于 text-xs-center，一旦写了，所有尺寸都会生效。想“小屏左对齐、大屏居中”，不能只写 text-center，得用断点类组合：
<p class="text-start text-md-center">小屏左对齐，中屏及以上居中</p>
关键逻辑：
-
text-start→text-xs-start，最小断点生效 -
text-md-center→ 在md（768px）及以上覆盖前面的text-start - 漏掉
text-start？小屏也会居中，往往不符合移动端阅读习惯 - 别混用
text-center和text-md-start：前者会强制 xs~xxl 全居中，后者无法覆盖
真要整行内容居中？别碰 text-center，改用 d-flex
当你要把一整行栅格（比如两个 .col-6）视觉上居中显示，而不是靠偏移或空列填充，text-center 完全无效。正确路径是让 .row 自己成为 flex 容器并控制对齐：
<div class="row justify-content-center"> <div class="col-6">左栏</div> <div class="col-6">右栏</div> </div>
这里生效的是 justify-content-center，不是任何 text-* 类。
容易踩的坑：
-
justify-content-center必须配合d-flex，而.row在 Bootstrap 5+ 默认就是d-flex，不用额外加；但如果你自定义了.row的 display，就得手动补 - 加了
justify-content-center后，所有子列会被等距分隔，若只想要“两列整体居中不分散”，就该用mx-auto包裹一个.col-12内部再放两列 - 垂直方向要居中？
align-items-center才管用，text-center依然毫无关系
真正麻烦的地方在于：text-center 这个名字太具误导性，它只管“文字怎么排”，不管“盒子怎么放”。只要看到布局没动，第一反应不该是加更多 text-* 类，而是检查容器的 display 类型和 flex 对齐配置。
