Bootstrap分页默认左对齐，需用d-flex justify-content-center居中；v3需text-center，注意display覆盖、float干扰及响应式类兼容性。
Bootstrap 分页默认不居中，得手动加类
Bootstrap 的 pagination 组件默认左对齐，没有内置居中类（比如 text-center 不能直接生效），因为它的内部是 ul + li 布局，且设置了 display: flex，所以单纯给外层加文本居中没用。
实操建议：
- 给
<nav>或包裹<ul class="pagination">的容器添加class="d-flex justify-content-center" - 确保父容器没有固定宽度或
float干扰（常见于旧版 Bootstrap 或混用浮动布局时） - 如果用了
pagination-sm或pagination-lg，不影响居中逻辑，但需注意小尺寸下按钮间距压缩，视觉上可能略偏紧
用 justify-content-center 但页面没反应？检查 Flex 容器是否被覆盖
最常踩的坑是：加了 d-flex justify-content-center 却没效果。原因通常是父级存在 text-align: center 或 CSS 重置规则干扰了 Flex 行为，或者 Bootstrap 版本差异导致默认 display 不是 flex。
实操建议：
- 打开浏览器开发者工具，检查
.pagination的 computeddisplay是否为flex（v4/v5 都是；v3 是inline-block，需另法） - v3 用户必须用
text-center包裹<ul>，且确保li是inline-block（默认就是） - 避免在分页外层同时写
float: left或position: absolute—— 这两类会脱离文档流，让justify-content失效
响应式居中：小屏幕下想改左对齐怎么办
有时需要桌面端居中、移动端左对齐（比如节省竖向空间），不能只靠一个类硬套。
实操建议：
- 用响应式工具类组合：
justify-content-center justify-content-md-start -
md及以上居左，sm下保持居中；若要反向（小屏居中、大屏居左），换成justify-content-sm-center justify-content-md-start - 注意：这些类只在 v4.1+ 和 v5 中可用；v3 不支持，得自己写媒体查询或 JS 切换类
自定义分页样式后居中失效？优先级和 display 冲突是主因
一旦覆盖了 .pagination 的 display（比如改成 block 或 grid），justify-content-center 就不再起作用。
实操建议：
- 不要重写
.pagination { display: ... }，除非你明确要接管整个布局逻辑 - 如需调整间距或圆角，优先用
gap、border-radius等不影响 layout type 的属性 - 若真要用
grid实现分页，那就得用justify-items: center或place-items: center替代
