vertical-align 仅控制行内元素在当前行框内的基线对齐，不实现父容器垂直居中；真正垂直居中应使用 display: flex + align-items: center。
vertical-align 在 inline 元素上根本不起作用的常见错觉
很多人以为给 span 或 img 加 vertical-align: middle 就能“居中”，结果发现位置纹丝不动，或者只在某些浏览器里生效——这不是 bug，是它本来就没被设计成干这事的。vertical-align 只影响行内框（inline-level box）在**当前行框（line box）内的基线对齐方式**，不是相对于父容器的垂直居中。它不改变元素自身在块级上下文中的布局位置，也不触发重排。
常见错误现象：
• 给 div 里几个 span 都加 vertical-align: middle，但父容器没设 line-height 或字体大小不一致，对齐乱套
• 把 vertical-align 用在 display: block 元素上（完全无效）
• 期望它让子元素相对于父 div 垂直居中，实际只是调整了和文字的相对位置
flex 实现 inline 场景垂直居中的真正写法
想让一组行内元素（比如图标+文字）在容器中真正垂直居中，最可靠的方式是把容器设为 display: flex，并用 align-items: center。这和 vertical-align 的语义完全不同：它是控制子项在交叉轴上的对齐，且不依赖行高或基线。
实操建议：
• 父容器必须是 display: flex，子元素无需额外设置 vertical-align
• 如果子元素本身是 inline（如 span、a），它们会自动变成 flex item，无需改 display
• 注意 align-items 默认值是 stretch，要显式写 center
• 若需兼容 IE10/11，避免用 align-items: center 配合 flex-direction: column，IE 对 column 下的 align-items 支持不稳定
简短示例：
div.container { display: flex; align-items: center; height: 40px; }<br>span.icon { display: inline-block; width: 20px; height: 20px; }<br>span.text { margin-left: 8px; }
哪些场景下 vertical-align 还得留着
不是所有 inline 场景都要一刀切换成 flex。有些老项目或特定排版（比如表格单元格里的图文混排、表单控件与 label 对齐）仍需 vertical-align，因为它轻量、无布局侵入性。
使用条件：
• 父容器是 display: table-cell（此时 vertical-align 控制单元格内容对齐，有效）
• 行内元素与文本共存，且需要微调基线（如图标略上提 2px 避免下沉）
• 用 line-height + vertical-align: middle 模拟单行文本垂直居中（仅限单行、固定高度）
• 不想触发 flex 布局带来的盒模型变化（比如 flex item 默认 min-width: auto，可能撑开容器）
IE 和旧版 Safari 的 flex 兼容性雷区
IE10–11 支持 flex，但语法和行为有偏差；iOS 8.4 之前的 Safari 对 align-items 在某些嵌套结构下渲染异常。直接写 display: flex 往往不够。
避坑要点：
• 必须加 flex: 0 0 auto 或 flex-shrink: 0 到子元素，防止 IE 下莫名压缩
• 避免只写 align-items: center 而不设 height 或 min-height，否则 IE 可能按内容高度收缩容器
• Safari vertical-align 和 flex 混用时，img 的默认 vertical-align: baseline 仍会干扰，需显式重置为 vertical-align: top
• 不要用 flex: 1 替代 flex: 1 1 0，IE10 会忽略第二个参数导致拉伸失效
事情说清了就结束。关键是别把 vertical-align 当万能居中开关，也别以为加了 flex 就一劳永逸——对齐逻辑变了，兼容细节就得跟着变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
