line-height实现单行文字垂直居中最轻量，适用于固定高度的块级标签，需设line-height等于height且text-align: center；多行或动态高度失效。
用 line-height 实现单行文字垂直居中（最轻量）
当导航项是固定高度的 <a></a> 标签，且内容只有一行时，line-height 是最快、兼容性最好的办法。它不依赖布局模型，也不改变 DOM 结构。
- 必须确保
<a></a>是块级（display: block或inline-block），否则line-height不起作用 -
line-height值需等于容器高度（如容器高48px，就设line-height: 48px） - 若字体缩放或响应式导致高度变化，该方案会失效——
line-height不会自动适配动态高度 - 多行文字会撑高容器，文字上下间距变大，视觉上“偏上”，不再是真正居中
示例：<a href="#" style="display: inline-block; height: 48px; line-height: 48px; text-align: center;">首页</a>
用 flex 实现可靠垂直居中（推荐现代项目）
只要父容器是 <li> 或 <nav></nav>，且子元素是 <a></a> 或含图标+文字的组合，display: flex + align-items: center 就是最稳的选择。
- 对父容器设
display: flex和align-items: center，无需知道子元素尺寸 - 子元素（如
<a></a>或<span></span>）可保持默认display: inline，不用强制改block - 图标（
<svg></svg>或<i></i>）和文字天然同轴对齐，不再受vertical-align或 baseline 干扰 - 注意：如果父容器本身没高度（比如
<ul></ul>默认无高），要显式设height或min-height，否则align-items: center看不出效果
示例：<li style="display: flex; align-items: center; height: 48px;"><a href="#">首页</a></li>
立即学习“前端免费学习笔记（深入）”；
为什么 vertical-align: middle 总是不准？
vertical-align 在行内布局里根本不是“对齐到容器中间”，而是对齐到当前行框的 x-height 中线，受兄弟元素、字体 ascender/descender、SVG viewBox 原点等影响极大。
-
<svg></svg>默认是display: inline，其原点位置不统一，vertical-align: middle会随字体大小浮动 - Bootstrap Icons 等字体图标常自带
vertical-align: -0.125em，覆盖你写的样式 - 即使所有元素都设了
vertical-align: middle，只要旁边有不同字号的文字，整行 baseline 就会偏移 - 别试
vertical-align: text-bottom或baseline——它们更不可控，纯靠猜
错误写法：<a><svg></svg>首页</a> + vertical-align: middle → 几乎必错位
Flex 布局下图标与文字间距怎么控制？
一旦用了 display: flex，就该放弃 margin 控制图标和文字距离——它容易和父级 gap 冲突，也难维护。
- 优先用
gap（在父 flex 容器上），语义清晰，不会影响子元素自身 margin - 若需更细粒度控制（比如图标右距文字 0.5rem，文字右距边框 1rem），给文字外层包一层
<span></span>，再对图标和该<span></span>分别设margin-right - 避免在
<svg></svg>上直接设margin：SVG 的宽高可能被 viewBox 缩放，margin 表现不稳定 - 所有 flex 子项建议统一设
align-items: center，哪怕只是文字——防止未来加图标时重新调整
示例：<a href="#" style="display: inline-flex; align-items: center; gap: 0.5rem;"><svg></svg><span>首页</span></a>
vertical-align 有效得多。 
