最可靠方式是直接给加justify-content-center类;text-center等无效因.pagination为flex容器,text-align不作用于弹性子项;窄屏需用justify-content-sm-center防挤压;动态分页须js手动添加类或媒体查询css。

直接给 <ul class="pagination"></ul> 加 justify-content-center 类,是最可靠、零配置的居中方式。 其他写法(比如 text-center、margin: 0 auto、center 标签)在 Bootstrap 4/5 中基本无效或不可靠,不是类没加对,就是布局机制不匹配。
为什么 text-center 加在 <ul></ul> 上完全没用
因为 .pagination 默认是 display: flex 容器,子项(<li class="page-item">)是弹性项目。text-align: center 只影响内联内容的文本对齐,对 flex 子项的主轴位置毫无作用。浏览器根本不会拿它去计算 justify-content。
- 常见错误:给外层
<nav></nav>或<div> 加 <code>text-center,但该容器没设display: inline或被浮动干扰 - 更隐蔽的问题:自定义 CSS 覆盖了
.pagination { display: block },导致 flex 布局彻底失效 - 拼写陷阱:
justify-center在 Bootstrap 5 中不存在,必须写全justify-content-center -
justify-content-sm-center从sm断点(≥576px)开始生效,在典型手机竖屏下保持左对齐,只在 iPad mini、折叠屏展开态等稍宽设备上才启用居中 - 类必须加在
<ul class="pagination"></ul>上,不能加在<nav></nav>或外层容器 - 如果同时写了
justify-content-center和justify-content-sm-center,后者会覆盖前者,造成预期外的行为 - 搭配
pagination-sm也完全兼容,无需额外调整 padding 或 gap - 推荐方案:监听
onPostBody事件后手动加类:$('ul.pagination').addClass('justify-content-sm-center') - 备选方案:写 CSS 规则,但要注意断点控制 ——
.bootstrap-table .pagination { justify-content: center; }必须用@media (min-width: 576px)包裹,否则又回到窄屏挤压问题 - 避免依赖
paginationVAlign: 'center',旧版插件支持不一致,容易失效
justify-content-sm-center 才是移动端“看起来居中”的关键
直接用 justify-content-center 在 iPhone SE(375px)、iPhone 12 mini(390px)等窄屏上,常出现页码挤成一团、换行错位甚至横向溢出——不是类没生效,而是它在所有断点下都强制居中,而小屏根本塞不下全部按钮。
和 bootstrap-table 动态分页共存时怎么加居中
bootstrap-table 的分页是 JS 运行时动态插入的 DOM,HTML 里写的 justify-content-sm-center 会被忽略。
真正卡住的往往不是“怎么加类”,而是某个隐藏的 display 覆盖、父容器的 float 或 position: absolute 干扰了 flex 布局,或者响应式断点没对齐实际设备宽度。动手前先打开开发者工具,检查 .pagination 的 computed display 是否为 flex,再看父容器有没有破坏 flex 流的样式。











