超链接不能直接用 margin: 0 auto 居中，因其默认为行内元素；需通过父容器设置 text-align: center（最稳），或块级化后配合 width 使用 margin: 0 auto，或在 flex 布局中用 justify-content 和 align-items 居中。
超链接本身不能直接用 margin: 0 auto 居中
因为 <a></a> 默认是行内元素，没有宽度可计算，margin: 0 auto 对它完全无效。你写了也不会动——这不是代码写错了，而是类型不匹配。
常见错误现象：<a href="#" style="margin: 0 auto;">点击这里</a> 在页面上依然靠左；或者加了 display: block 却没设宽度，结果还是撑满父容器、看起来没居中。
真正起作用的是父容器的控制逻辑。所以问题核心不在 <a></a> 自身，而在它包在哪一层、那层有没有“可居中的上下文”。
父容器宽度不明确时，text-align: center 最稳
只要父容器是块级（比如 <div>），且里面只放行内内容（文字、<code><a></a>、<img alt="HTML超链接居中如何处理父容器宽度" > 等），就直接给父容器加 text-align: center。
立即学习“前端免费学习笔记（深入）”；
这个方案不依赖父容器宽度是否固定，哪怕父容器是 max-width: 100%; width: 100% 或者被浮动/弹性布局影响塌陷了，只要它有渲染出来的宽度（哪怕是 fit-content），text-align 就能生效。
注意点：
- 别给
<a></a>自己加text-align: center—— 它不是块容器，不起作用 - 如果父容器里混了
<div> 这类块级子元素，它们不会被 <code>text-align影响，仍靠左；需要单独处理或统一转成display: inline-block - 父容器若用了
float、display: inline-block或被内容撑窄，可能导致自身宽度变小，视觉上“居中偏移”，要先检查父容器是否正常撑开
父容器宽度明确时，margin: 0 auto 可用于块级化后的 <a></a>
如果你确实要把超链接当独立模块处理（比如按钮式链接），可以强制它块级化并设宽：
<div class="link-wrapper"> <a href="#" style="display: block; width: 200px; margin: 0 auto;">立即购买</a> </div>
但这个做法有硬性前提：
-
<a></a>必须加display: block或inline-block - 必须显式设置
width或max-width（不能是100%） - 父容器不能是
display: flex或display: grid—— 否则margin: 0 auto被忽略 - 父容器不能让
<a></a>脱离文档流（比如加了float或position: absolute）
一旦父容器用了 flex，就该切到 justify-content: center，而不是硬扛 margin。
Flex 布局下居中 <a></a> 必须配高度才能垂直居中
如果目标是水平+垂直居中（比如登录页里的“忘记密码？”链接），用 display: flex 是最干净的解法，但容易漏掉关键约束：
父容器必须同时满足：
display: flex-
justify-content: center（水平） -
align-items: center（垂直） -
min-height: 100vh或其他明确高度（否则align-items无参考基准）
典型错误：只加了 justify-content: center，结果链接只水平居中、垂直还在顶部——不是属性没生效，是父容器高度为 auto，交叉轴长度为 0。
另外，<a></a> 自身千万别再设 margin: auto，尤其在 Safari 中会和 flex 冲突，导致上下偏移几像素。
