超链接需包裹在块级容器中才能全屏居中；因是行内元素，text-align或margin对其无效；推荐用flexbox：父容器设display:flex、justify-content:center、align-items:center、min-height:100vh，html/body需height:100%且margin:0。
超链接本身不能直接全屏居中，必须包裹在块级容器里
HTML 中的 <a></a> 标签默认是行内元素，text-align: center 或 margin: 0 auto 对它单独使用无效——因为这些样式不作用于行内元素自身，只影响其内容或父容器布局。所以第一步永远是：给 <a></a> 加一个父容器（比如 <div>），再对这个容器做全屏居中。
<h3>用 Flexbox 实现最稳的全屏居中（推荐）</h3>
<p>这是目前最可靠、最少坑的方案，尤其适合大屏展示场景：</p>
<ul>
<li>
<code>html 和 body 必须设 height: 100% 且清除默认 margin
<a></a> 的父容器（如 <div class="link-wrapper">）设 <code>display: flex; justify-content: center; align-items: center; min-height: 100vh;
<a></a> 本身不需要任何居中样式，也不用改 display 类型-ms-justify-content 和 -ms-align-items，但注意 IE 对 justify-content: center 有已知渲染 bug示例片段：
html, body {
height: 100%;
margin: 0;
}
.link-wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
用绝对定位 + transform 居中（适合弹窗式超链接）
当这个超链接是模态层、全屏按钮或需要脱离文档流时，这个组合更合适：
-
<a></a>的直接父容器（通常是或一个position: relative的<div>）必须有明确定位上下文 <li> <code><a></a>自身设position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 低版本 Android WebView（4.3 及以下）需补
-webkit-transform - 别写
margin-top: -20px这类硬编码值——链接文字变多、字体缩放、响应式切换都会让它偏移 -
min-height: 100vh写成height: 100%：后者依赖父级高度，而body没设height: 100%就会塌陷 - 给
<a></a>直接加text-align: center：无效，因为它是行内元素，该样式只对子内容起作用 - 忘记清除
body默认margin：会导致上边留白，视觉上“没真居中” - 在 Grid/Flex 容器里又给
<a></a>加float或position: absolute：直接脱离布局流，居中失效
容易被忽略的关键点
全屏居中不是“让某个标签自己居中”，而是“让它的容器在有确定尺寸的上下文中居中”。常见翻车点包括：
