text-center对.pagination无效，因其是flex容器，子项为弹性项目，需用justify-content-center类直接作用于上才能居中。
为什么text-center加在<ul class="pagination"></ul>上没用
因为 bootstrap 4/5 的 .pagination 默认是 display: flex 容器，子项（<li class="page-item">）是弹性项目，text-align: center 只影响内联内容的文本对齐，对 flex 子项的主轴位置完全无效。你加了 text-center，浏览器根本不会拿它去算 justify-content。
常见错误包括：
- 给
<nav></nav>或外层<div> 加 <code>text-center，但没检查该容器是否设置了display: inline或被浮动干扰 - 在
.pagination上同时写了text-center和justify-content-center，后者生效，前者冗余 - 用了自定义 CSS 覆盖了
.pagination { display: block }，导致 flex 布局失效，此时justify-content-center彻底失能
justify-content-center 必须加在 <ul class="pagination"></ul> 上
这是唯一可靠、零配置的居中方式。Bootstrap 4 和 5 的 .pagination 已内置 d-flex，所以只需补一个对齐类即可生效。
正确写法示例：
<nav aria-label="Page navigation"><ul class="pagination justify-content-center">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul></nav>
注意要点：
- 不要加在
<nav></nav>上（除非你明确要让整个导航区域 flex 居中） -
justify-content-center与pagination-lg、pagination-sm完全兼容，无需额外调整 - 拼写必须是
justify-content-center，不是justify-center（Bootstrap 5 中不存在这个类）
响应式居中：小屏左对齐、大屏居中怎么配
移动端屏幕窄，分页项挤在一起，左对齐更节省横向空间；桌面端则更适合视觉居中。这时不能只靠一个类硬套。
推荐组合：
-
justify-content-md-center：≥768px（md 断点）开始居中，小屏保持默认左对齐 -
justify-content-sm-center justify-content-md-start：小屏居中、中屏及以上左对齐（反向需求） - 避免混用
justify-content-center和带断点的同类，后者会覆盖前者
这些断点类在 Bootstrap 4.1+ 和 5 中原生支持，v3 不支持，需自行写媒体查询或 JS 切换。
和 bootstrap-table 分页共存时怎么办
如果你用的是 bootstrap-table 插件（如 data-pagination="true"），它的分页 DOM 是 JS 动态生成的，justify-content-center 类可能被漏掉或覆盖。
实操建议：
- 初始化后手动加类：
$('ul.pagination').addClass('justify-content-center') - 或在插件选项中 hook
onPostBody回调，确保每次重绘后都补上 - 若 CSS 优先级冲突，可加
!important（不推荐），或改用更具体的父选择器，例如.table-container .pagination
真正卡住的往往不是“加不加类”，而是某个隐藏的 display 被覆盖，或者 JS 生成的 DOM 没走你写的 HTML 模板路径。打开 DevTools 看一眼 .pagination 的 computed display 和实际 class 列表，比猜快得多。
