Bootstrap 5 分页条需用 d-flex justify-content-center 在父容器上实现居中，且必须加 mb-0 清除 pagination 默认下边距；text-center 对 flex 子项无效，不能用于 ul.pagination。
Bootstrap 5 分页条默认不居中，需要手动加类
Bootstrap 5 的 pagination 组件默认左对齐，没有内置的居中类（不像 v4 有 justify-content-center 直接可用）。直接套用 后，分页项会贴左显示。
解决方法很简单：把 pagination 放进一个 flex 容器，并用 Bootstrap 自带的间距/对齐工具类控制。
- 推荐写法：
-
mb-0是关键——去掉pagination默认的margin-bottom: 1rem，否则上下会有额外空隙 - 不要给
ul.pagination单独加text-center，它对 flex 子项无效
为什么 text-center 对 Bootstrap 5 分页没用
因为 pagination 内部使用了 display: flex，而 text-center 只影响 inline 元素和块级文本的对齐，对 flex 子项的布局无作用。强行加只会让文字内容居中，但分页按钮本身位置不变。
- 错误示例：
- 正确思路：对父容器用
d-flex+justify-content-center - 如果父元素已有其他 flex 属性（如
flex-direction: column），需确保不影响主轴方向
响应式居中：小屏幕下避免换行溢出
分页项较多时，在手机上可能撑宽容器或换行错位。这时候不能只依赖居中，还要限制宽度和折叠逻辑。
- 加
flex-wrap: wrap配合justify-content-center，允许折行但保持居中：class="d-flex flex-wrap justify-content-center" - 用
pagination-sm缩小尺寸： - 极端情况可考虑用 JS 截断（如只显示 1–3、当前页、倒数 3 页），但纯 CSS 居中不解决数据量问题
自定义样式冲突时检查 !important 和父级 text-align
如果你加了居中类但没生效，大概率是外部样式覆盖了 flex 行为。
- 检查父元素是否设置了
text-align: right或float，它们会干扰 flex 布局 - 审查元素看
justify-content-center是否被标记为!important覆盖（Bootstrap 本身不加!important） - 避免在
ul.pagination上写margin: 0 auto——flex 容器里这句无效
居中本身很简单，但容易卡在“以为加了 text-center 就够了”或者忘了清掉 pagination 自带的 margin-bottom。真正在意细节的人，会多看一眼 computed styles 里 justify-content 到底有没有生效。
