超链接居中需分场景：text-align必须设在父容器上；margin:0 auto需a为块级且有宽；flex居中需父容器设display:flex、justify-content:center及可计算宽度。
超链接本身不能用 text-align 居中，必须写在父容器上
很多人给 <a> 标签加 text-align: center，结果毫无反应——因为 text-align 是**父容器的属性**，它只控制子元素（包括 <a>）内部的行内内容对齐，不控制 <a> 自身在父容器里的位置。
正确做法是把居中声明放在包裹 <a> 的父元素上：
<div style="text-align: center;"> <a href="/about">关于我们</a> </div>
- 如果
<a>是行内元素（默认），text-align: center就能让它水平居中 - 如果父容器用了
display: flex或display: grid，text-align会被忽略，此时应改用justify-content: center - 别在
<a>上写margin: 0 auto——它是行内元素，该写法完全无效
用 margin: 0 auto 居中失败？先确认 <a> 是块级元素
margin: 0 auto 对 <a> 生效，前提是它得是块级或 inline-block 元素。默认情况下，<a> 是 display: inline，所以直接写 margin: 0 auto 不起作用，浏览器会静默忽略。
修复方式很简单：
立即学习“前端免费学习笔记（深入）”；
<a href="/contact" style="display: block; width: 200px; margin: 0 auto;">联系我们</a>
- 必须加
display: block或display: inline-block - 必须有明确宽度（如
width: 200px或max-width: 200px），max-width: 100%不算可计算宽度 - 父容器不能是
flex或grid，否则margin: auto行为被接管
Flex 布局里 <a> 居中失效，三要素缺一不可
写了 display: flex 和 justify-content: center 却没效果？大概率是父容器没通过“flex 启动校验”。
关键检查点：
- 父容器是否真设了
display: flex（不是inline-flex或被插件覆盖） - 是否写了
justify-content: center（注意拼写，不是justfy） - 父容器是否有可计算的主轴尺寸——比如
width: 100%、max-width: 800px，或继承自有宽父级；空<div>在 flex 下可能塌缩为 0 宽 -
<a>本身不能有float或position: absolute，否则脱离 flex 流
移动端点击区域偏小或居中错位，和 display 类型强相关
在手机上，<a> 默认是行内元素，高度由 line-height 和字体撑开，点击热区常比视觉区域窄，且容易因 vertical-align 偏移。
推荐统一处理：
- 加
display: block或display: inline-block，再配padding扩展点击区 - 避免仅靠
text-align居中后还依赖默认行高；显式设line-height: 1.5或height+display: flex+align-items: center - 如果
<a>包含图片，务必给图片加display: block，否则底部多出空白间隙 - 不要用
transform: translate(-50%, -50%)居中——缩放时 iOS Safari 会出现像素级偏差
真正卡住人的往往不是语法写错，而是没意识到 text-align 和 margin: auto 的生效前提完全不同，一个管内容排版，一个管块级定位；而 flex 的居中又额外绑定了父容器的尺寸上下文。漏掉任意一层，都会让“看起来就该居中”的链接顽固地靠左。
