vertical-align: middle 加在 <a> 上没反应，是因为它只对 inline 或 inline-block 元素生效，且对齐基准是所在行框的基线，而非父容器高度；常见失效包括写在块级父元素上、子元素设 display: block、父容器无明确高度或受 line-height 干扰。
超链接（<a>）本身是行内元素，不能直接用 vertical-align 让它在块级容器里“上下居中”——必须明确作用对象和上下文，否则永远调不准。
为什么 vertical-align: middle 加在 <a> 上没反应？
因为 vertical-align 只对 display: inline 或 inline-block 元素生效，且它的对齐基准是**所在行框（line box）的基线**，不是父容器高度。常见失效点：
- 把
vertical-align写在<div>或<p>这类块级父元素上——完全无效 -
<a>里嵌了<span>或图标，又给子元素设了display: block——破坏了行内上下文 - 父容器高度靠内容撑开（
height: auto），没有足够空间让middle显出效果 - 同时用了
line-height，但值小于容器实际高度，视觉上“看不出”居中
真正能稳住的三种做法（按推荐顺序）
优先选语义清晰、控制力强的方式：
-
Flex 布局（最推荐）：给
<a>的父容器加display: flex+align-items: center，<a>保持默认inline或改inline-block都行。不依赖高度计算，多行文本、图标混排也稳 -
绝对定位 + transform（兼容老浏览器）：父容器设
position: relative和明确高度（如min-height: 48px），<a>设position: absolute; top: 50%; transform: translateY(-50%) -
table-cell 模拟（仅限纯文本链接）：父容器设
display: table-cell; vertical-align: middle; text-align: center，再配width和height或min-height。注意：<a>不能设display: block，否则失效
<a> 里含图标时怎么对齐？
一旦 <a> 内有 <svg>、<i> 或 <img>，vertical-align 就容易飘：
立即学习“前端免费学习笔记（深入）”；
- 别给图标单独设
vertical-align，统一用父容器display: flex; align-items: center - 如果必须用
vertical-align，确保图标是inline（不要加display: block），然后试vertical-align: middle或text-bottom，-.125em在字体图标里常偏高 -
gap: 8px比margin-right更安全，避免因换行或响应式缩放导致错位
最容易被忽略的一点：所有垂直居中方案都依赖父容器有可计算的高度。如果只写 height: auto，flex align-items 和 absolute + transform 都会失效——哪怕看着“好像居中了”，换一行文字或改个字体大小就露馅。
