text-align: center 必须加在 a 的父容器上而非 a 自身，因为该属性仅对块级容器及其行内子元素生效；a 默认为 inline 元素，需通过父容器设置居中或自身设为 block/inline-block 并配宽度。
超链接 a 标签加了 text-align: center 却不居中
这不是代码写错了，而是你把 text-align 加在了 a 自身上。这个属性只对**块级容器**生效，且只影响它的**行内子元素**——而 a 默认是 inline 元素，自己没法被 text-align 居中。
正确做法是给 a 的父容器（比如 div、p 或 nav）加样式：
- 确保父容器是块级（默认就是），没被设成
display: inline或float - 检查父容器是否被插件或主题强制设为
display: flex—— 这会直接让text-align失效 - 确认父容器没有塌陷：如果它里面只有浮动的
a，又没清除浮动，computed width 可能是 0px，text-align就没作用对象
margin: 0 auto 对 a 标签无效
margin: 0 auto 只对**有明确宽度的块级元素**生效。而 a 默认是 inline，既没宽也没块，写了等于白写。
想用这个方式，得先让它“变块”：
立即学习“前端免费学习笔记（深入）”；
- 给
a加display: block或display: inline-block - 必须同时设一个确定的宽度，比如
width: 200px或max-width: 80%；width: 100%不行，它没“剩余空间”可分 - 如果父容器用了
display: flex，那margin: auto会被接管，此时应改用justify-content: center
点击区域偏移或文字错位
常见于给 a 加了 padding 或 line-height 后，视觉上“好像没居中”。其实不是居中失败，而是行高/内边距改变了基线位置。
排查重点：
- 检查是否意外加了
vertical-align: top/bottom/middle—— 它会影响 inline 元素在行框内的对齐基准 -
line-height设得过大时，文字会“浮”在容器中间，但点击热区仍按原始尺寸计算，容易误判 - 如果用了
font-size: 0清除 inline 间隙，会导致a高度塌缩，文字挤成一团，必须配font-size: 16px回去
响应式下居中突然失效
不是 CSS 写漏了，而是媒体查询里某条规则覆盖了居中逻辑。尤其要注意：
- WordPress 或古腾堡编辑器生成的
a常被包在wp-block-button里，它的默认样式可能带display: inline-flex，直接废掉text-align - 某些 UI 框架（如 Bootstrap）会给
a加display: inline-block，再配合float，导致父容器塌陷 - 移动端 viewport 设置不全（缺
user-scalable=no或initial-scale=1）会让浏览器缩放页面，视觉上破坏居中感
最稳的排查路径：打开 DevTools → 看 computed styles → 锁定 a 的 display、margin 和父容器的 display、width，三者缺一不可。
