vertical-align仅作用于inline-level和table-cell元素，对块级元素无效；其核心用途是控制行内元素在行框中的垂直对齐或表格单元格内容的垂直对齐，而非实现容器内垂直居中。
vertical-align 只作用于 inline-level 和 table-cell 元素
它根本不是为块级元素设计的。CSS 规范明确定义 vertical-align 的生效前提是：目标元素必须是 inline、inline-block、inline-table 或 table-cell。一个默认 display: block 的 div，哪怕你硬加上 vertical-align: middle，浏览器会直接忽略——这不是 bug，是规范行为。
常见误用场景包括：
- 给
div或p直接设vertical-align，毫无反应 - 给
float或position: absolute元素设该属性，此时 display 被强制重置为block，vertical-align失效 - 在 Flex 容器中给子项设
vertical-align，而 Flex 子项的对齐应由align-items或align-self控制
为什么 inline-block 元素设了 vertical-align 还“错位”
因为 inline-block 仍属于行内格式化上下文（IFC），它的对齐基准仍是行盒（line box）里的基线（baseline）。默认情况下，inline-block 的 baseline 是其内容最后一行文字的 baseline；若内容为空或只有块级子元素，baseline 就落在容器底边，导致视觉上“下沉”。
解决方法不是猜值，而是明确控制：
立即学习“前端免费学习笔记（深入）”；
- 统一设
vertical-align: top或vertical-align: middle，避免 baseline 不一致 - 父容器加
font-size: 0消除空白符产生的行高干扰，再单独给子元素设font-size - 用
vertical-align: -2px这类数值微调，比依赖middle更可靠
想让块级元素“垂直居中”，别硬套 vertical-align
这是最常踩的逻辑陷阱：vertical-align 解决的是“行内环境中的垂直位置”，不是“容器内的垂直居中”。真要让一个 div 在父容器里垂直居中，该用真正面向布局的方案：
- Flex 布局：
display: flex+align-items: center（推荐，语义清晰、兼容好） - Grid 布局：
display: grid+place-items: center - 绝对定位 + transform：
position: absolute+top: 50%+transform: translateY(-50%) - table-cell 方案（老式但兼容极佳）：父元素
display: table，子元素display: table-cell+vertical-align: middle
强行把块级元素改成 inline-block 再配 vertical-align，往往要连带处理 line-height、空白符、父容器高度等副作用，得不偿失。
字体图标和 img 标签的 vertical-align 行为差异
img 天然是 inline，所以 vertical-align 直接生效；但字体图标（如 <i class="icon"></i>）本质是文字，它的 baseline 对齐逻辑更复杂——视觉中心常不等于字体度量中心。
典型表现是：设 vertical-align: middle 后图标仍略偏下。这时更稳妥的做法是：
- 用
vertical-align: -0.125em（Font Awesome 官方推荐偏移量） - 改用
vertical-align: text-bottom强制底边对齐 - 直接包裹一层
span并设display: inline-block，再独立控制对齐
真正容易被忽略的，是不同字体图标库的度量差异——同一段 CSS 在 FontAwesome 和 IconPark 下可能需要不同的 vertical-align 数值。不要写死 middle，留出微调余地。
