bootstrap分页组件怎么设置居中显示-Bootstrap教程-PHP中文网

最直接有效的方式是为分页容器添加 justify-content-center 类，因 .pagination 是 flex 容器，需用 Flex 布局类控制主轴对齐，text-center 无效；响应式可选 justify-content-md-center，与 bootstrap-table 共存时需手动加类或 CSS 强制。

用 `justify-content-center` 是最直接有效的方式

bootstrap 4/5 的分页组件（<ul class="pagination"></ul>）默认左对齐，要居中，不能靠 text-center 或 mx-auto —— 因为 .pagination 本身是 flex 容器，子项（<li>）是弹性项目，必须用 flex 布局类控制主轴对齐。

正确做法是在分页容器上加 justify-content-center：

<nav aria-label="Page navigation"><ul class="pagination justify-content-center">
<li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul></nav>

justify-content-center 必须加在 <ul class="pagination"></ul> 上，不是外层 <nav></nav> 或 <div> <li>别写成 <code>justify-center（Bootstrap 5 中不存在这个类，常见拼写错误）
如果用了 pagination-lg 或 pagination-sm，justify-content-center 依然兼容，无需额外调整

为什么 `text-center` 大概率失效

text-center 只影响内联内容的文本对齐，而 .pagination 的每个 <li> 是 display: flex 子项（Bootstrap 内部已设），其宽度由内容撑开，text-center 对它们的定位毫无作用。

典型错误现场：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

<div class="text-center">
  <ul class="pagination">...</ul>
</div>

这只会让 <ul></ul> 在父容器中“按文本方式”居中——但 <ul></ul> 默认是块级元素，text-center 对它无效（除非父容器是内联上下文）
更隐蔽的问题：若父容器有 padding 或浮动干扰，text-center 表现会不可预测
真正起效的是 d-flex + justify-content-center 组合，而 .pagination 已自带 d-flex，所以只需补一个 justify-content-center

响应式居中要注意断点类

如果只想在中屏及以上居中，小屏保持左对齐，就得用响应式版本：justify-content-md-center、justify-content-lg-center 等。

Bootstrap 4/5 都支持这类断点前缀，比如 justify-content-sm-center 表示从 sm（≥576px）开始居中
别混用多个断点类（如同时写 justify-content-center justify-content-md-start），后者会覆盖前者
移动端常需保留左对齐（节省横向空间），所以推荐优先用 justify-content-md-center 而非无前缀版

和 `bootstrap-table` 分页共存时的特殊处理

如果你用的是 bootstrap-table 插件（如 data-pagination="true"），它的分页 DOM 是 JS 动态生成的，class 不一定包含 pagination，默认也不带居中类。

插件生成的分页容器通常是 <div class="fixed-table-pagination">，内部才是 <code><ul class="pagination"></ul>
可全局加 CSS 强制居中：.fixed-table-pagination .pagination { justify-content: center !important; }
更稳妥的做法：在 onPostBody 回调里手动添加类：$('.fixed-table-pagination .pagination').addClass('justify-content-center')
注意：不要在初始化时用 classes: { pagination: 'pagination justify-content-center' }，因为该配置只作用于外层容器，不保证生效

最容易被忽略的一点：居中类必须作用在真正的 flex 容器上。如果分页被套了多层 <div> 且中间某层加了 <code>flex-direction: column 或 display: block，justify-content-center 就会彻底失效——这时候得 inspect 元素，一层层看 display 计算值，而不是盲目加 class。