最简可行方案是给父容器加 text-align: center，因 a 默认为行内元素，margin: 0 auto 无效；若需垂直+水平居中，则用 display: flex + justify-content: center + align-items: center，并确保父容器有明确高度且未塌陷。
直接给超链接的父容器加 text-align: center，比折腾 margin: 0 auto 或绝对定位更稳——因为 a 默认是行内元素，margin: auto 对它根本不起作用。
为什么 a { margin: 0 auto } 失效
浏览器不会为行内元素计算左右 auto 外边距，这个值会被静默忽略。即使你给 a 加了 display: block，也还得满足两个前提才可能生效：有明确宽度（比如 width: 200px），且父容器不能是 flex 或 grid。但网页级居中通常不希望限制链接宽度，所以这条路在实际项目里基本走不通。
最简可行方案：text-align: center 写在 body 或 wrapper 上
这是兼容性好、语义清晰、响应式友好的做法：
- 确保父容器能“撑开”：比如
body默认宽度 100%，没问题；如果用了float或position: absolute，父容器可能塌陷，得补width: 100%或overflow: hidden -
a标签本身不需要额外样式，保持默认display: inline即可 - 如果页面有其他行内内容（比如文字、图标），它们也会跟着居中——这通常是预期行为；如需隔离，就用独立
div包一层
示例：
<a href="/home">首页</a> <a href="/about">关于</a>
需要垂直+水平居中时，改用 flex 布局
仅当超链接要放在一个有明确高度的区域（比如页眉、登录框）并需上下居中时才启用：
- 父容器必须有可计算高度：可以是
height: 80px、min-height: 100vh，或height: 100%（此时要确保html和body都设了height: 100%） - 只写
display: flex不够，必须同时加justify-content: center和align-items: center -
a不用设display: block，flex 下行内元素也能被对齐
示例：
<header style="height: 80px; display: flex; justify-content: center; align-items: center;"><a href="/login">登录</a> </header>
真正容易被忽略的是父容器的高度来源和是否塌陷——哪怕 CSS 写对了，body 没撑开、或外层用了 float，text-align: center 就会“看起来没效果”。先检查父容器是否真有宽度，再调样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
