必须将a设为display: block（或inline-block）才能在flex容器中被align-items: center垂直居中，因a默认行内级不响应align-items；text-align: center仅控制行内内容在行框内的水平对齐，与容器高度无关，故无法垂直居中。
超链接在最小高度容器中居中，必须用 display: flex + align-items: center，但仅靠这个还不够——a 元素默认是行内级，不响应 align-items，得先让它“变成可居中的子项”。
为什么 text-align: center 只能水平、不能垂直？
text-align: center 作用于行内内容（包括 a），只控制**行内盒在行框内的水平对齐**，对容器自身的高度无感知，更无法影响垂直位置。即使容器设了 min-height: 60px，a 仍会紧贴顶部 baseline 对齐，上下留白不均。
- 常见错误现象：
a文字底部被截断、行高撑不开、小屏下文字贴顶 - 根本原因：行内元素的垂直对齐由
vertical-align控制，默认是baseline，而baseline的参考线随字体变化，不可靠 - 解决方案不是调
vertical-align，而是让a脱离行内流，获得独立的块级行为
让 a 在 flex 容器中真正居中的三步
父容器启用 flex 后，a 必须满足三个条件才能被 align-items: center 正确计算：
- 给
a加display: block或display: inline-block（推荐block，避免行内对齐干扰） - 确保父容器有明确的交叉轴约束：用
min-height: 60px或height: 60px，不能只靠内容撑高 -
a不能设margin: auto—— 这会覆盖align-items的垂直行为，在 Safari 中尤其容易失效
示例：
<div style="display: flex; align-items: center; min-height: 60px; border: 1px solid #ccc;"> <a href="#" style="display: block; padding: 0 16px;">点击进入</a> </div>
替代方案：不用 flex，但要兼容老浏览器？
如果必须支持 IE10 或更低版本，可用 line-height 法，但仅限单行文本超链接：
- 父容器设
line-height等于其min-height值（如line-height: 60px） -
a必须保持默认display: inline，且不能换行（加white-space: nowrap更稳） - 缺点明显：多行文本直接崩溃；字体大小变化时
line-height需同步调整；移动端缩放易错位
所以除非项目硬性要求，否则别为兼容性牺牲现代写法的健壮性。
容易被忽略的细节：padding 和 line-height 冲突
很多人给 a 加 padding 后发现垂直偏移，其实是 padding 和 line-height 共同作用的结果——即使没显式写 line-height，浏览器也会按字体大小生成默认值。
- 解决办法：统一用
padding控制垂直空间，显式设line-height: 1或line-height: normal消除隐式影响 - 若用
flex，padding是安全的，它属于元素自身盒模型，不影响align-items计算 - 但若混用
line-height和flex，line-height会制造额外行框，导致a实际占据高度大于容器，出现滚动或溢出
真正可靠的居中，从来不是堆属性，而是理解 a 的显示类型、父容器的布局上下文，以及哪些样式会互相覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
