最稳方案是给设display: flex和align-items: center，使其成为弹性容器并垂直居中内容；需显式定义高度、避免line-height冲突，且父容器必须有明确高度才能生效。
超链接按钮（<a></a>）本身不能直接垂直居中——它默认是行内元素，没有高度概念；必须先让它参与块级或弹性布局，才有“垂直居中”可言。
给 <a></a> 加 display: flex 最稳
把超链接当按钮用时，最推荐直接在 <a></a> 上启用 Flex 布局，而不是套 <div> 或改用 <code><button></button>——语义清晰、无需额外标签、兼容性好（Chrome/Firefox/Safari/Edge 全支持，IE11 需加 display: -ms-flexbox）。
- 必须设
display: flex和align-items: center，否则文字仍按 baseline 对齐，视觉偏高 - 若需水平居中内容（比如图标+文字），加
justify-content: center - 避免同时设
line-height：它会和align-items: center冲突，导致文字上下跳动 - 高度靠
padding或height显式定义，否则 Flex 无法确定交叉轴基准
text-align: center 只管水平，对垂直无效
很多人误以为给父容器设 text-align: center 能让 <a></a> 垂直居中，其实它只影响行内元素的**水平对齐位置**，对垂直方向完全没作用。常见错误现象：
- 父容器加了
text-align: center，但<a></a>还是贴着顶部 - 换字体或缩放页面后，
<a></a>突然下沉或上浮 - 加了
vertical-align: middle后图标消失或位置飘忽（因为<a></a>默认基线对齐，而vertical-align在行内流里行为不稳定）
父容器用 display: grid + place-items: center
如果超链接是独立元素（比如登录页中央的「立即注册」按钮），且父容器只含它一个子元素，display: grid 是代码量最少、逻辑最干净的方案：
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: grid和place-items: center，一行搞定水平+垂直居中 - 注意：父容器必须有明确高度（如
min-height: 100vh），否则place-items没参照系 - 不要给
<a></a>自己加margin: auto——Grid 下它会被忽略，还可能干扰place-items - IE11 需前缀：
display: -ms-grid+-ms-grid-row-align: center+-ms-grid-column-align: center
绝对定位慎用，除非真要脱离文档流
用 position: absolute + transform: translate(-50%, -50%) 虽然能强行居中，但前提是父容器已设 position: relative，且你明确需要这个 <a></a> 不占布局空间。
- 漏写
top: 50%和left: 50%是高频错误——transform只偏移自身，不移动定位原点 - 响应式场景下，若父容器高度随屏幕变化，这个方案依然稳定；但频繁重排时性能略低于 Flex
- 移动端 WebView（如旧版 Cordova）可能不支持
transform，需加-webkit-transform前缀 - 如果后续要加其他兄弟元素（比如提示文字），这个方案会让结构难以维护
真正容易被忽略的是：**所有垂直居中方案都依赖父容器有可计算的高度**。哪怕用了 flex 或 grid，只要父容器靠内容撑开、没设 height 或 min-height，align-items 和 place-items 就等于没生效。
