超链接（）默认为行内元素，margin: 0 auto对其无效；必须先设display: block或inline-block并指定宽度才能生效，或改用flex布局（父容器设display: flex; justify-content: center; align-items: center; min-height: 100vh）实现可靠居中。
超链接本身是行内元素，不能直接用 margin: 0 auto
很多人一上来就给 <a></a> 标签加 margin: 0 auto，发现完全没反应——因为 <a></a> 默认是 display: inline，而 margin: auto 对行内元素无效。必须先改变它的显示类型。
常见错误现象：链接文字水平居中了，但整块链接（比如带背景、边框的按钮）还是贴左；或者设置了 text-align: center，结果只让内部文字居中，父容器没高度，垂直方向根本没参照。
- 想靠
margin: 0 auto水平居中，得先设display: block或display: inline-block，且要有明确宽度（width） - 如果只是纯文本链接，
text-align: center加在父容器上即可，但这是“内容居中”，不是“链接盒子居中” - 垂直方向没有天然参照，父容器必须有明确高度（比如
height: 100vh或min-height: 100vh），否则align-items或line-height都会失效
用 Flex 布局最稳，父容器设三行 CSS 就够
现代浏览器（Chrome 29+、Firefox 20+、Safari 6.1+、Edge 12+）都支持，代码少、逻辑直、适配性强。不用管链接宽高是否动态，也不用算负 margin。
关键点在于：居中的是 <a></a> 这个元素盒子，不是它里面的文字。所以操作对象是它的父容器。
- 父容器加
display: flex - 加
justify-content: center（水平居中） - 加
align-items: center（垂直居中） - 父容器必须有高度，例如
height: 100vh或min-height: 100vh
示例：
.link-container {<br> display: flex;<br> justify-content: center;<br> align-items: center;<br> min-height: 100vh;<br>}<br><br><div class="link-container">
<br><a href="#">点击进入</a><br>
</div>
单行文字链接可用 text-align + line-height，但限制极多
这个方法轻量、兼容老浏览器，但只适用于「固定高度容器 + 单行文字 + 不换行」这种窄场景。一旦文字变多、字体放大、或容器高度由内容撑开，line-height 就会把文字拉变形甚至截断。
- 父容器设
text-align: center（水平） - 父容器设
height和line-height相同值（例如height: 60px; line-height: 60px;） -
<a></a>保持默认inline，不要加display改变类型 - 避免给
<a></a>加padding或vertical-align，否则会破坏对齐
错误示范：line-height: 60px 但容器 height: auto → 垂直方向实际没约束，居中不成立。
绝对定位 + transform 适合脱离文档流的场景
当链接需要覆盖在图片、视频或其他层之上（比如模态框里的关闭按钮），又不想影响其他布局时，这个方案比 Flex 更可控。但它要求父容器是相对定位上下文（position: relative），否则 top/left 会相对于 计算。
- 父容器加
position: relative -
<a></a>加position: absolute; top: 50%; left: 50% - 再加
transform: translate(-50%, -50%)把自身中心点对准坐标 - 别漏掉
display: block（否则transform在某些旧版 Safari 下可能不生效）
注意：transform 是视觉位移，元素仍占原始文档流位置——除非你主动设 position: absolute 把它拿走。
position: relative 导致链接飞到页面左上角。两种方案选哪个，取决于你是否需要链接参与正常文档流。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
