Bootstrap分页默认左对齐因.pagination是flex容器，text-align无效；应直接设justify-content:center或end，或用Bootstrap工具类justify-content-center/end。
Bootstrap分页默认居左，text-align 为什么有时没反应
因为 Bootstrap 5+ 的 .pagination 是 flex 容器，默认不响应父级 text-align。你给外层加 text-align: center，它照旧左对齐——这不是你写错了，是 flex 布局的天然行为。
- 检查是否用了 Bootstrap 5 或更新版本（
.pagination内部是display: flex） - 直接对
.pagination本身设justify-content，别依赖父元素text-align - 如果外层是
<nav></nav>或<div>，确保它没被设成 flex 容器（否则 <code>text-align也无效）用
justify-content居中或右对齐分页这是最直接、兼容性最好的方式，绕过
text-align的限制，直击 flex 布局控制点。- 居中：
.pagination { justify-content: center; } - 右对齐：
.pagination { justify-content: flex-end; } - 要全局生效，加到自定义 CSS 文件里，且确保它在 Bootstrap CSS 之后加载
- 避免用
!important——优先提高选择器权重，比如写成nav .pagination
不想改 CSS？试试 Bootstrap 内置工具类
Bootstrap 5.3+ 提供了响应式对齐工具类，比手写 CSS 更轻量，也更符合框架习惯。
- 居中：
<nav class="d-flex"><ul class="pagination m-0 justify-content-center">...</ul></nav> - 右对齐：
justify-content-end - 注意：
.pagination默认有上下 margin，用m-0清掉，避免和justify-content联用时错位 - 这些类在 IE11 中不支持，如需兼容，退回手动写
justify-content
用
text-align成功的唯一可靠场景只有当
.pagination被显式设为display: inline-flex或display: inline-block时，父容器的text-align才会起作用——但这不是默认行为，属于主动降级布局。立即学习“前端免费学习笔记（深入）”；
- 例如：
.pagination { display: inline-flex; }+ 父<div style="text-align: center"> <li>缺点：失去 flex 子项的自动等宽/换行控制，响应式表现变弱</li> <li>不推荐日常使用，仅用于极简嵌入或 legacy 页面微调</li> 对齐本身很简单，难的是判断当前用的是哪个 Bootstrap 版本、有没有其他 CSS 干扰了 <code>display值——建议先用浏览器开发者工具看一眼.pagination计算后的display和justify-content值，再决定动哪一行代码。
- 居中：
