小屏居中对齐不能只用text-center，因其仅作用于行内内容；需结合d-flex、justify-content-center及断点类（如justify-content-md-start）实现响应式控制，并确保父容器为flex容器。
小屏居中对齐为什么不能只写 text-center
因为 text-center 只影响行内内容（如文字、<img> 默认 inline），对块级元素（如 <button></button>、<div>）自身位置无效。你在 <code><div class="col"><button>提交</button></div> 上加 text-center，按钮依然左贴边——它没动，只是按钮内部的文本被居中了。
真正要居中的是整个列容器（或其子元素），不是文字。所以得用 Flex 布局控制容器本身的位置。
正确做法：用 justify-content-center + 断点类
把列容器变成 Flex 项目，并让父容器（通常是 <div class="row">）启用 Flex 主轴居中：
<ul>
<li>
<code>justify-content-center 对整行所有列水平居中，但它默认作用于所有断点（xs ~ xxl）
justify-content-center justify-content-md-start
justify-content-md-start 从 md（768px）起覆盖前面的居中行为，让中屏及以上左对齐d-flex：如果父容器不是 Flex 容器（比如直接套在 <div class="container"> 里），<code>justify-content-* 类完全不生效
示例结构：
<div class="d-flex justify-content-center justify-content-md-start"> <div class="col-12 col-md-6">内容</div> </div>
如果列里是单个按钮或卡片，更稳妥的写法
不依赖整行高度或父容器 Flex 设置，直接在列内部用 Flex 控制：
- 给
<div class="col"> 加 <code>d-flex justify-content-center，让它的直接子元素水平居中 - 如果子元素是块级（如
<button></button>），再加w-100或设宽，避免它只包内容导致视觉偏移 - 小屏下用
flex-column配合justify-content-center，能同时处理垂直+水平居中（比如全屏登录框） - 注意：
justify-content-center在flex-column下控制的是垂直方向，别和align-items-center搞混
常见翻车点：写了 justify-content-center 却没加 d-flex，或者加在了 <div class="row"> 外层的 <code><div> 上——那个外层不是 Flex 容器，类等于没写。
<h3>响应式对齐冲突时优先级怎么算</h3>
<p>多个对齐类共存时，Bootstrap 按 CSS 特性（specificity）和加载顺序生效，但实际可预测：</p>
<ul>
<li>
<code>justify-content-center 和 justify-content-md-start 同时存在，后者在 ≥768px 生效，前者兜底 xs/sm
text-center，它只作用于文字/行内子元素，不影响 Flex 居中逻辑，但可能造成视觉错觉（比如按钮文字居中、按钮本身却靠左）position: absolute）或浮动（float）元素会脱离文档流，Flex 居中对其完全无效——这类元素得单独用 top: 50%; left: 50%; transform: translate(-50%, -50%)
最易被忽略的是：小屏居中后，大屏没显式重置，结果整个页面所有尺寸都居中；或者用了 col-md-6 却忘了小屏下它自动变 100% 宽，导致 justify-content-center 实际没意义——这时该用 col-12 col-md-6 显式声明小屏宽度。
