加了 justify-content-center 仍不居中，是因为该类必须直接加在 上，而非外层容器；若用 bootstrap 3、display 被覆盖、父容器干扰或类名拼错（如 justify-center），也会失效。
为什么加了 justify-content-center 还是不居中
因为 .pagination 本身已是 flex 容器（Bootstrap 4/5 默认设了 display: flex），所以 justify-content-center 确实该起作用——但前提是它被加在正确的位置，且没被其他样式覆盖。
常见失效原因：
-
justify-content-center写在了外层<nav></nav>或<div> 上，而不是直接写在 <code><ul class="pagination"></ul>上 - 项目里自定义 CSS 覆盖了
.pagination { display: flex }，比如改成display: block或grid，导致 justify-content 失效 - 父容器有
float: left、position: absolute或text-align: center干扰，让 flex 行为被降级或忽略 - 用了 Bootstrap 3 —— 它的
.pagination是inline-block布局，justify-content-*类根本不存在，也不起作用
justify-content-center 必须加在 <ul class="pagination"></ul> 上
不是加在 <nav></nav>，也不是加在包裹它的 <div>，就是 <code><ul></ul> 自己。这是最常错的位置。
正确写法：
<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>
</ul></nav>
错误写法示例：
-
<nav class="justify-content-center"><ul class="pagination">...</ul></nav>（<nav></nav>不是 flex 容器，类无效） -
<div class="text-center"><ul class="pagination">...</ul></div>（text-center对 flex 子项无影响） -
<ul class="pagination justify-center"></ul>（拼错类名，Bootstrap 没有justify-center）
Bootstrap 3 用户别用 justify-content-center
Bootstrap 3 的 .pagination 是基于 inline-block 的 <ul><li></ul> 结构，不支持 flex 工具类。强行加 justify-content-center 不会生效，连 CSS 属性都不识别。
必须用传统方式：
- 给外层容器加
text-center（例如<div class="text-center"><ul class="pagination">...</ul></div>） - 确保
.pagination li保持默认display: inline-block（不要覆盖） - 避免父容器有
float或overflow: hidden干扰行内对齐
如果混用了 Bootstrap 4/5 的 CSS 文件，但 DOM 还是 v3 结构，也会出现“类存在但不生效”的情况——得统一版本或手动补 CSS。
响应式居中时断点类要匹配实际需求
桌面端想居中、移动端想左对齐，不能只写 justify-content-center —— 它会在所有尺寸生效。得用带断点的类，比如 justify-content-md-center。
注意点：
-
justify-content-md-center表示「≥768px 时居中，小于此宽度恢复默认左对齐」 - Bootstrap 4/5 支持
sm/md/lg/xl前缀；v3 不支持，需手写媒体查询 - 别同时写
justify-content-center justify-content-md-start，后者会覆盖前者 - 如果用了
pagination-sm或pagination-lg，不影响断点类逻辑，但小尺寸下按钮更挤，视觉上可能显得偏左
真正卡住的往往不是“加不加类”，而是某个隐藏的 display 覆盖、断点没对齐，或者误以为 text-center 能管 flex 布局。
