line-height实现单行文字垂直居中最轻量，适用于固定高度的块级标签，需设line-height等于height且text-align: center；多行或动态高度失效。

用 line-height 实现单行文字垂直居中（最轻量）

当导航项是固定高度的 @#@#@#@#@#@#@#@#@#@0

用 flex 实现可靠垂直居中（推荐现代项目）

只要父容器是

或

，且子元素是 @#@#@#@#@#@#@#@#@#@1

为什么 vertical-align: middle 总是不准？

vertical-align 在行内布局里根本不是“对齐到容器中间”，而是对齐到当前行框的 x-height 中线，受兄弟元素、字体 ascender/descender、SVG viewBox 原点等影响极大。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 默认是 display: inline，其原点位置不统一，vertical-align: middle 会随字体大小浮动
• Bootstrap Icons 等字体图标常自带 vertical-align: -0.125em，覆盖你写的样式
• 即使所有元素都设了 vertical-align: middle，只要旁边有不同字号的文字，整行 baseline 就会偏移
• 别试 vertical-align: text-bottom 或 baseline——它们更不可控，纯靠猜

错误写法：@#@#@#@#@#@#@#@#@#@2

真正麻烦的不是“怎么居中”，而是“为什么上次能居中这次不行”。多数时候是因为父容器高度塌陷、flex 作用域没套对、或者 SVG 被其他 CSS 规则悄悄重置了 display。动手前先用浏览器开发者工具检查 computed styles，比反复改 vertical-align 有效得多。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！