text-align: center对分页按钮无效，因其仅使行内内容（如文字）居中，不控制行内元素（如）自身在父容器中的位置；需用flex或grid布局整体居中整组按钮。
分页按钮用 <a></a> 标签时，为什么 text-align: center 没用
因为 <a></a> 默认是行内元素，text-align: center 只影响它内部的文字对齐，不控制它自己在父容器里的位置。你给父 <div> 加了 <code>text-align: center，但每个 <a></a> 还是紧挨着左排，视觉上根本没“居中”。
真正要居中的是这一整组按钮（比如「上一页 1 2 3 … 下一页」），不是单个链接。
- 别在父容器上只加
text-align: center - 确保分页容器是块级元素（如
<nav></nav>或<div>），且有明确宽度或占满可用空间 <li>用 <code>display: flex+justify-content: center才能真正把整组按钮水平居中 - 必须用
<nav aria-label="页码导航"></nav>包裹整个区域 - 当前页用
<span class="active">2</span>，不要用<a href="#">2</a>（禁用链接仍需保留可聚焦能力） - 上一页/下一页链接带上
rel="prev"/rel="next" - 禁用状态（如第一页时「上一页」不可点）保留
<a></a>，但加aria-disabled="true"和tabindex="-1" - 推荐用
gap: 8px（现代浏览器全支持），它只作用于项目之间，不会影响首尾外边距 - 如果需兼容 IE11，改用
margin：给所有<a></a>或<li>设margin-inline: 4px（左右各 4px），再用:first-child, :last-child覆盖掉首尾的margin-inline-start/margin-inline-end - 避免对每个
<a></a>单独设margin-right—— 「下一页」右边会多出一截空白 - 给每个分页项（
<a></a>或<button></button>）设min-width: 44px和min-height: 44px - 用
padding补足尺寸，比如padding: 8px 16px，再配合line-height垂直居中文本 - 避免相邻项
margin小于 8px，否则手指容易误触两个 - 在
@media (hover: hover)里定义悬停态，防止桌面样式污染触屏设备
<nav></nav> 容器里怎么写分页链接结构才合规
语义和可访问性比样式更重要。不能只写一堆 <a></a>，否则读屏软件和搜索引擎都认不出这是分页。
错误示例：<div class="pagination">
<a>1</a><a>2</a>
</div> —— 缺少语义、无障碍支持弱、SEO 不友好。
立即学习“前端免费学习笔记（深入）”；
Flex 居中分页按钮时，margin 和 gap 怎么选
用 display: flex 后，按钮默认横向排列。间距控制很关键：错用 margin 容易导致首尾多出空白，或响应式下换行错乱。
注意：gap 在 flex-wrap: wrap 下依然可靠；margin 在换行时可能失效。
移动端触摸目标太小，光调 font-size 不解决问题
很多开发者发现手机上点不准，第一反应是把文字调大。但 iOS/Android 要求最小触摸目标 ≥ 44×44px，只放大字号，按钮实际尺寸未必达标。
真正麻烦的是动态页码数量变化时——比如从 5 个变成 20 个，首尾按钮是否还该保留圆角、是否要折叠显示「…」，这些没法靠纯 CSS 判断，得靠 JS 控制类名或 DOM 结构。
