vertical-align 只对 table-cell、inline、inline-block 元素生效，对 block 元素（如默认 div）无效；flex 布局中 align-items: center 需父容器有明确高度；表格单元格多行内容居中应改用 flex；邮件等兼容场景优先使用内联 valign 和嵌套表格。
vertical-align 不是“让子元素在父容器里居中”的属性，它根本就不是干这个的——直接给 div 或 span 加 vertical-align: middle，基本没反应。
为什么 vertical-align: middle 在 div 上完全无效？
因为 vertical-align 只对三类元素起作用：table-cell、inline、inline-block。普通 div 默认是 block，浏览器直接忽略该声明。
- 常见错误现象：写完
div { vertical-align: middle; }，文字还是顶着顶部；用开发者工具看 computed styles，会发现该属性压根没生效 - 即使改成
display: inline-block，也得确保父容器有足够行高（line-height），否则仍可能贴顶 - 如果父容器是
table-cell（比如td），那vertical-align: middle是有效的——但它只影响“行内级内容”，对内部的块级div依然无效
flex 布局中 align-items: center 不居中？检查父容器有没有高度
很多人写了 display: flex 和 align-items: center，但子元素还是不居中，问题几乎总出在父容器没撑开。
-
align-items依赖父容器在交叉轴（垂直方向）上有明确尺寸，height或min-height缺一不可 - 若父容器是空的或仅含文本，它的
height可能为auto，实际计算值为0，导致“居中”失去参照 - 全屏场景慎用
height: 100vh：iOS Safari 地址栏缩放时会跳变；更稳妥的是min-height: 100%+html, body { height: 100% } - 别在 flex 容器上再写
vertical-align——它对 flex 子项完全无效，且可能干扰渲染
表格单元格（td）里多行文字不居中？别硬扛 vertical-align
vertical-align: middle 在 td 上看似有效，但遇到换行段落、div 包裹内容或不同字体行高时，常表现为“第一行基线对齐”，视觉上严重偏上。
- 根本原因：
vertical-align对多行内容只作用于每个“行框（line box）”，无法统一对齐整个块 - 真正可靠的解法是把
td改成 flex 容器：display: flex; align-items: center; justify-content: center; min-height: 48px; - 必须加
min-height，否则内容少时容器塌缩，居中失效；IE10–11 需额外加height: 100%并确保父tr有高度 - 避免同时设置
vertical-align和display: flex——二者逻辑冲突，后者会完全覆盖前者
邮件签名等兼容性敏感场景，优先回退到表格结构
Apple Mail、Outlook 等客户端对 CSS 支持极弱：vertical-align 在混合内容中大概率失效，flex 几乎不支持，grid 更不用提。
- 唯一稳定方案是嵌套表格：
<td valign="middle"><table><tr><td align="left">内容</td></tr></table></td> - 必须用内联样式，禁用缩写：
border-bottom: 1px solid #000比border: 0可靠；valign="middle"比 CSSvertical-align解析率高 - 图片要加
display: block，否则默认 inline 会带底部空白；图标旁文字需同层td，不能包裹在div里 - 所有标签闭合必须严格，Apple Mail 对 HTML 错误极其敏感，一个未闭合的
<span></span>就可能导致整段样式丢失
真正容易被忽略的点是：居中从来不是单个 CSS 属性的事，而是“父容器尺寸 + 子元素类型 + 渲染上下文”三者共同决定的。你改了 vertical-align 却没动 line-height，或者用了 flex 却忘了设 min-height，结果都一样——看起来什么都没发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
