移动端居中必须用 justify-content-sm-center，不是 justify-content-center，也不是 text-center。
为什么 justify-content-center 在手机上不生效
因为 justify-content-center 是无断点类，它在所有屏幕宽度下都生效——包括小屏。但问题在于：Bootstrap 默认的分页容器（<ul class="pagination"></ul>）是 d-flex，而 flex 主轴对齐受父容器宽度和自身 flex 项行为影响。在窄屏下，页码数量多、按钮文字宽，flex 会自动换行或压缩，此时单纯居中反而导致视觉错位甚至溢出。
更关键的是：很多项目实际用了 pagination-sm 或动态生成的页码（比如 10+ 页），小屏根本塞不下全部按钮，浏览器会按 flex 规则把超出部分截断或堆叠，justify-content-center 此时只是“居中一堆被挤变形的元素”，不是你想要的效果。
- 检查 computed 样式里
.pagination的display是否为flex（v4.1+/v5 都是，v3 不是） - 确认没有父级
float、position: absolute或width: fit-content干扰 flex 布局 - 别在
<nav></nav>上加text-center——它对 flex 子项无效
justify-content-sm-center 才是移动端居中的正确写法
这个类从 sm 断点（≥576px）开始生效，意味着在 iPhone SE（375px）、iPhone 12 mini（390px）等典型小屏设备上，它 不会触发，从而保持默认左对齐；而在 iPad mini（768px）、折叠屏展开态等“小屏偏大”场景下才启用居中——这恰恰符合真实移动端体验需求：窄屏优先保证可点击区域和阅读流，不强行居中牺牲可用性。
如果你真需要在所有移动设备（含 375px）上强制居中，必须配合 flex-wrap: wrap 和合理页码数量控制，否则大概率出现横向滚动或按钮重叠。
- 写法：
<ul class="pagination justify-content-sm-center"></ul>，类必须加在<ul></ul>上，不是外层<nav></nav> - 不要混用
justify-content-center justify-content-sm-center——后者会覆盖前者 - 搭配
pagination-sm时无需额外处理，justify-content-sm-center依然生效
和 bootstrap-table 共存时怎么加居中
bootstrap-table 的分页是 JS 动态插入的 DOM，它默认不会给你加任何 flex 对齐类，所以靠 HTML 写死的 justify-content-sm-center 无效。
必须用 JS 注入或 CSS 强制：
- 初始化时用
paginationVAlign: 'center'（仅部分旧版支持，不可靠） - 更稳的方式：监听
onPostBody事件，手动给生成的分页容器加类：$('ul.pagination').addClass('justify-content-sm-center') - 或者直接写 CSS：
.bootstrap-table .pagination { justify-content: center !important; }，再用媒体查询限定小屏：@media (min-width: 576px) { .bootstrap-table .pagination { justify-content: center; } }
容易被忽略的兼容细节
v3 和 v4/v5 的处理逻辑完全不同：v3 的 .pagination 是 inline-block，靠 text-align: center 居中；v4.1+ 和 v5 才是 flex。如果你项目还在用 v3，加 justify-content-sm-center 完全没反应——它压根不存在。
另外，自定义分页样式（比如用 gap 替代 margin 控制间距）时，justify-content-sm-center 仍有效，但要注意 gap 在 flex 换行时的行为可能让居中看起来“偏移”。
真正要落地，得先确认 Bootstrap 版本，再看分页是否动态生成，最后决定是加类、写 CSS 还是改 JS —— 没有银弹，只有匹配上下文的解法。
