a标签默认行内，父容器设text-align:center即可水平居中；若转为block、float、absolute或位于flex容器中，则需对应使用margin:0 auto、justify-content:center等规则。
a 标签默认是行内元素，直接套在块级容器里用 text-align: center 就能居中；但一旦加了 display: block、float、position: absolute 或嵌套在 flex 容器中没设对齐属性，就会错位。核心不是“怎么居中”，而是“它现在被什么规则拽偏了”。
检查父容器的 text-align 是否被覆盖
最常见的情况：外层 div 确实写了 text-align: center，但中间穿插了 float: left 的兄弟元素，或者父容器本身被设了 text-align: left 且选择器权重更高。
- 打开开发者工具，选中那个错位的
a，看右侧面板 “Computed” 里的text-align值，确认最终生效的是哪个规则 - 如果父容器用了
flex，text-align会完全失效——此时要改用justify-content: center - 避免在
body或全局div上写text-align: center，容易污染所有行内内容；应限定作用域，比如.nav-links { text-align: center; }
a 被设成 display: block 后没设宽或没配 margin: auto
把超链接变成块级后，它就不再响应父容器的 text-align，必须靠自身盒模型控制位置。不设宽度 + 不设 margin: auto，它会默认占满整行，视觉上就像“贴左”。
- 若想水平居中，至少要加两行：
display: block;+width: fit-content;（或具体像素/%）+margin: 0 auto; - 用
fit-content比固定宽更安全，尤其文字长度不确定时；但注意 IE 不支持，需 fallback 到inline-block方案 - 别写
margin: auto 0;——垂直方向 auto 在非绝对定位下无效，水平方向才起作用
Flex 容器中 a 错位：漏了 justify-content 或 align-items
当 a 是 flex 子项时，它的位置由容器控制，而不是自己。哪怕给 a 加了 margin: auto，也只在主轴方向生效，交叉轴（比如垂直居中）仍需容器明确声明。
- 水平居中：确保父容器有
display: flex;+justify-content: center; - 同时垂直居中：加
align-items: center;（适用于单行）或align-content: center;（适用于多行换行） - 如果父容器高度为
auto，align-items: center可能看不出效果——先给父容器设个min-height: 100vh或固定高再调试
零宽空格 或 混在链接文本里
编辑从 Word 复制、CMS 富文本粘贴、甚至某些 Markdown 渲染器，会在中文前后悄悄插入零宽空格（\u200C）或零宽非连接符（\u200D）。它们生成真实文本节点，占据水平空间，导致 a 内容实际宽度变大，text-align: center 计算基准偏移。
- 用开发者工具右键“Edit as HTML”，复制链接内部 HTML，粘到 VS Code 里搜
\u200c或 - 临时加一行
* { outline: 1px solid red !important; }，看是否有个看不见的细长 outline 卡在文字旁边 - 修复方式：服务端/构建时正则替换
/[\u200B-\u200F\u202A-\u202E]/g为空；或前端 JS 初始化时清理：linkEl.textContent = linkEl.textContent.replace(/[\u200B-\u200F\u202A-\u202E]/g, '');
真正难调的往往不是居中逻辑本身，而是多个布局上下文叠加：比如 flex 容器里套了 block a，又加了 float 清除，再混入零宽字符——这时候得一层层关掉 CSS 规则做排除，而不是堆新样式去“覆盖”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
