vertical-align 可用于内联元素垂直对齐，但仅在行内格式化上下文中生效，需满足 display: inline/inline-block、父容器非 flex/grid、有足够 line-height 等前提。
内联元素本身不能用 vertical-align 垂直居中？错，但必须满足前提
vertical-align 确实是控制内联元素（如 <span>、<img>、<button>）在行内上下位置的唯一 CSS 属性，但它**只在行内格式化上下文（inline formatting context）中生效**——也就是说，它只对“处在同一行内”的兄弟元素起作用，且依赖父容器的 line-height 和基线（baseline）行为。
常见错误现象：<span style="vertical-align: middle">文字</span> 单独写在空 <div> 里毫无反应；或者和 <img> 并排时偏高/偏低，调了 middle 还是不对。
- 必须确保该元素是
display: inline或inline-block（默认就是） - 父容器不能是
display: flex或display: grid（此时vertical-align完全失效） - 若父容器是纯文本流，需有足够
line-height提供垂直空间，否则“居中”无参照 -
vertical-align: middle是相对于父元素的基线 + x-height 中点对齐，不是相对于整个父容器高度居中
vertical-align: middle 和 vertical-align: center 不是一回事
CSS 里没有 vertical-align: center 这个值。很多人输错成 center，浏览器会直接忽略该声明，退回到默认的 baseline 行为——于是看起来“没效果”。真正可用的常用值只有：baseline、top、middle、bottom、text-top、text-bottom，以及带单位的数值（如 -4px）。
其中 middle 的对齐逻辑容易被误解：它把元素的垂直中点对齐到父元素的基线 + x-height / 2 处（x-height 是小写字母 x 的高度），不是父容器高度的一半。
立即学习“前端免费学习笔记（深入）”；
- 图片配文字时，
vertical-align: middle通常比baseline更协调，但仍有轻微偏差 - 若想彻底消除偏差，可统一设
vertical-align: top或vertical-align: bottom，再配合line-height控制行高 - 需要像素级对齐时，建议改用
display: inline-block+transform: translateY(-50%)（但要确保父容器有明确高度）
真·上下居中一个内联元素？得先让它脱离行内流
如果你的目标是让一个 <span> 或 <i> 在其父 <div> 的**整个高度范围内垂直居中**（比如导航栏里的图标），vertical-align 就不合适了——它天生不负责容器级对齐。
这时候正确做法是：让内联元素“升格”为可参与块级布局的元素，再用现代方案居中。
- 加
display: inline-block，然后父容器设display: flex; align-items: center; - 或父容器设
display: table-cell; vertical-align: middle;（兼容旧浏览器，但语义弱） - 避免用
position: absolute+top: 50%; transform: translateY(-50%)——虽然可行，但脱离文档流后可能影响可访问性和响应式表现 - 别给父容器同时设
text-align: center和vertical-align混用，二者作用域完全不同，不会叠加生效
表格单元格里内联内容怎么垂直居中？别碰 align 属性
HTML5 已废弃 <td align="center" valign="middle"> 这类属性。直接写 valign="middle" 在现代浏览器中虽可能临时生效，但属于不可靠的遗留行为，W3C 验证器报错，且在 flex 或 grid 父容器下必然失效。
正确方式始终是 CSS：td, th { vertical-align: middle; }。注意：
-
vertical-align对<td>有效，是因为表格单元格本身是table-cell显示类型，它支持该属性 - 如果单元格里塞了个
<div>，而你想让这个<div>在单元格里垂直居中，那得给它加display: flex; align-items: center;，而不是指望vertical-align透传 -
vertical-align要起效，单元格必须有明确高度（height或min-height），否则按内容撑开，就没有“垂直方向可居中”的空间
真正难的不是选哪个属性，而是分清“对齐谁”和“在哪一级对齐”——vertical-align 是行内兄弟之间的相对定位，不是容器中心锚点。一旦混淆这个前提，所有调试都会南辕北辙。
