text-center对列内按钮、图片无效，因其仅控制行内内容在块容器中的水平对齐，而button、div等默认块级元素不受影响；需用Flex布局（如justify-content-center）实现真正居中。
text-center 为什么对列内按钮、图片无效
text-center 只作用于行内内容（span、文字、img 默认 inline）的水平对齐，前提是这些元素没脱离文档流或被设为块级。但一旦你在 .col 里放一个 button 或 div，它们默认是块级元素，text-align: center 对它们自身的位置毫无影响——它只控制其内部的行内子内容怎么排。
常见翻车现场：
- 给
<div class="col"><button>提交</button></div>加text-center，按钮依然左贴边 - 加了
text-center后，里面一段文字居中了，但右侧图标却“飘”到行外——因为图标用了float或position: absolute，已脱离 flow - 响应式下
text-center在小屏生效，大屏失效，只因你没加text-md-start这类断点重置类
align-items-center 加在哪才起效
必须加在 .row 上，且该 .row 是这些 .col 的**直接父容器**。Bootstrap 的 .row 默认是 display: flex，但 align-items 默认值是 stretch，不是 center —— 所以不显式加类，列就按各自内容高度拉伸，视觉上“参差不齐”。
关键点：
- 加在
.row：整行所有列垂直居中对齐（适用于图文混排、卡片高度不一等场景） - 加在某个
.col内部：比如<div class="col d-flex align-items-center">...</div>，适合单列独立控制，不干扰其他列 - 别加在
.container或外层div上：它不是 flex 容器，加了也白加 - 如果列里内容太少，
.row高度塌陷，align-items-center就没空间可居中——此时需给.row加min-height，或改用列内d-flex flex-column justify-content-center
Flex 居中和 text-center 混用会冲突吗
会，而且冲突得挺隐蔽。比如你在 .row 上加了 justify-content-center align-items-center，又在某个 .col 里套了个 <p class="text-center">标题</p>，看起来没问题；但一旦这个 p 里嵌了 float: right 的操作按钮，或者用了 position: absolute 的角标，text-center 就完全失效，而 Flex 的居中逻辑又管不到绝对定位元素。
更麻烦的是响应式场景：
-
text-center和justify-content-md-center同时存在，小屏靠前者，中屏靠后者，但断点交界处可能因渲染顺序出现抖动 - 某些旧版定制 Bootstrap（尤其 Bootstrap 4 精简包）缺失
align-items-*工具类，text-center看似“兜底”，实则根本不是同一维度的解决方案 - 真正需要混合对齐（比如标签左对齐 + 数值居中 + 单位右对齐）时，
text-center完全无能为力，必须切到d-flex+ 多个flex-grow-1或ms-auto/me-auto
什么情况下还该坚持用 text-center
仅当对象明确是纯文本、单行短内容，且不需要与其他块级元素（按钮、图标、表单控件）构成统一视觉基线时。text-center 轻量、兼容性好、语义清晰，没必要为简单场景强行上 Flex。
典型适用场景：
-
<h2 class="text-center">关于我们</h2>—— 标题居中，无其他兄弟元素 -
<p class="text-muted text-center">© 2026 公司名称</p>—— 页脚版权行，纯文本+颜色修饰 - 配合
text-lg-start做断点对齐切换，比如小屏居中、大屏左对齐
但只要涉及“列内多类型内容对齐”或“跨设备一致的视觉锚点”，text-center 就该让位给 Flex 工具类——这不是升级，是归位：它本就不是为这种任务设计的。
