超链接居中首选父容器设text-align: center；若需块级控制则须给加display: block与显式width再配margin: 0 auto；flex布局应作用于父容器而非自身。
超链接是行内元素，直接用 text-align: center
绝大多数情况下，<a> 默认是 display: inline，它天然服从父容器的文本对齐规则。只要父容器是块级（比如 <div>），给父容器加 text-align: center 就能立刻生效。
常见错误现象：<a href="#">点击我</a> 加了 margin: 0 auto 没反应——因为 margin: auto 对行内元素无效。
- 父容器必须是块级（默认或显式设
display: block） - 别在
<a>上写display: block后又忘了设width——否则margin: 0 auto依然不工作 - 如果
<a>里嵌了<img>或<span>且用了float或position: absolute，text-align会失效
想让超链接变块级再居中，必须配 width 和 margin: 0 auto
有时需要给 <a> 加背景、内边距或固定尺寸，就得先把它变成块级。但这时不能只写 display: block 就完事——margin: 0 auto 要求宽度可计算。
常见错误现象：链接加了 display: block 但还贴着左边，检查 computed style 会发现它的 width 是 auto（即内容宽），浏览器无法均分左右 margin。
立即学习“前端免费学习笔记（深入）”；
- 必须显式设
width，比如width: 200px或width: fit-content（注意 IE 不支持后者） - 不能同时设
float或position: absolute，否则margin: auto失效 -
display: inline-block也行，但它仍算行内级，得靠父容器text-align: center驱动，不是自身居中
Flex 布局最稳，但别错加在 <a> 自身上
现代项目里，用 Flex 实现居中几乎零容错，前提是把样式加在父容器上，而不是 <a> 标签自己。
常见错误现象：给 <a> 写 display: flex，结果链接文字被拉伸变形——那是把链接当成了 flex 容器，不是 flex 项目。
- 父容器设
display: flex+justify-content: center -
<a>保持默认display: inline或inline-block即可，无需额外样式 - 如果父容器已有
float、position: absolute或是display: grid，flex 规则会被覆盖 - IE10–11 对
justify-content: center有渲染 bug，老项目慎用
绝对定位适合弹窗类链接，但父容器得设 position: relative
当超链接要脱离文档流（比如悬浮提示、固定按钮），用 position: absolute 配合 transform 最精准。
常见错误现象：链接跑到页面左上角或视口中心——八成是父容器没设 position: relative，导致 left: 50% 相对于 <body> 计算。
- 父容器必须有
position: relative（或其他非static值） -
<a>设position: absolute+left: 50%+transform: translateX(-50%) - 不用知道链接具体宽度，
translateX(-50%)永远按自身宽算 - 旧版 Safari 需加
-webkit-transform: translateX(-50%)
<a> 的显示类型和父容器的定位上下文——打开开发者工具，一眼就能看出它是 inline 还是 block，父容器有没有 position: relative，比反复试样式快得多。 
