分页条居中需先让容器自身居中再处理内部对齐：Flex布局（display: flex + justify-content: center）最简洁；兼容方案用display: table + margin: 0 auto配合inline-block子项；text-align无效常因父容器未收缩宽度或未清除浮动。
分页条里的数字链接（a）默认是行内元素，直接套 text-align: center 没用——因为居中作用对象是它的父容器，而父容器往往没设宽度或没撑开，导致“看起来没居中”。关键不是给 a 加样式，而是控制它所在的容器行为。
为什么 text-align: center 有时不生效
常见错误是只给分页容器（比如 ul 或 div）加了 text-align: center，但容器本身是块级且未设置宽度、也未清除浮动或未处理子项的显示方式。结果就是：文字确实居中了，但整个分页条还是靠左贴边——因为容器自己没在父级里居中。
- 父容器（如
body或.page-nav）没设width或没触发 BFC，text-align只影响内容对齐，不改变容器自身位置 -
li默认是块级或列表项，若未设display: inline-block，会独占一行，text-align对它们无效 - 用了
float: left布局分页项，但没清除浮动，导致父容器高度塌陷，视觉上“消失”了居中基础
不用固定宽度也能让分页条整体居中
最稳妥的做法是让分页容器“自动收拢宽度”，再让它自身水平居中。这比猜 width: 300px 更可靠，尤其当页码数动态变化时。
- 给外层容器（如
div.page-nav）设display: table+margin: 0 auto，它会根据子内容自动收缩宽度 - 把每个分页项（
a或li）设为display: inline-block，确保它们排成一行且能被text-align影响 - 如果用
ul包裹，记得重置默认padding-left和list-style
.page-nav {
display: table;
margin: 0 auto;
}
.page-nav a,
.page-nav li {
display: inline-block;
margin: 0 4px;
}
.page-nav ul {
padding-left: 0;
list-style: none;
}
用 Flexbox 一行代码搞定（推荐现代项目）
如果不需要兼容 IE10 以下，display: flex 是最干净的解法。它天然无视子项是否浮动、是否块级，也不依赖 text-align。
立即学习“前端免费学习笔记（深入）”；
- 给分页容器设
display: flex+justify-content: center，子项自动水平居中 - 去掉所有
float、inline-block、text-align相关 hack - 注意：若容器是
ul，Flex 会覆盖list-style，但不影响语义；若需保留可加list-style: none显式控制
.page-nav {
display: flex;
justify-content: center;
}
.page-nav a {
margin: 0 6px;
padding: 4px 8px;
}
容易忽略的细节：垂直对齐和可访问性
数字链接居中不只是水平问题。如果分页条高度不一致（比如有上标“当前页”或图标），vertical-align: middle 很容易被漏掉。
-
inline-block元素默认按基线对齐，数字可能上下浮动，加vertical-align: middle统一基准 - 避免用
<center></center>标签或align="center"属性——已废弃，无语义，影响可访问性 - 如果分页条是导航区域，建议包在
<nav aria-label="分页导航"></nav>里，提升屏幕阅读器体验
真正卡住人的往往不是“怎么写 CSS”，而是没意识到分页条居中本质是两层问题：先让分页容器自己居中，再让里面数字对齐。一旦拆开看，每种方案的取舍就很清楚了——Flex 是首选，display: table 是兼容兜底，而盲目调 text-align 只是在修表面。
