vertical-align仅对table-cell（如<td><th>）或inline/inline-block元素生效；设在block元素上无效，需确保作用对象正确且避免嵌套干扰。
vertical-align 对 table-cell 元素才生效
vertical-align 在表格单元格里看似“应该管用”，但很多人发现设了 vertical-align: middle 却没效果——根本原因是它只对 display: table-cell（即 <td>、<th>）或 inline / inline-block 元素起作用。如果给 <div> 或 <p> 直接设 vertical-align，浏览器会忽略。
所以第一件事是确认你改的是 <td> 或 <th> 的样式，而不是它的子元素：
td {
vertical-align: middle; /* ✅ 正确：作用于 table-cell */
}
td div {
vertical-align: middle; /* ❌ 无效：div 默认是 block，不响应 vertical-align */
}不要在 td 里套 div 再设 vertical-align
常见错误是这样写 HTML：
<td> <div style="vertical-align: middle">文字</div> </td>
这时 vertical-align 对 <div> 完全无效，因为它的 display 是 block。要让它生效，得显式改成 inline-block 或 inline，但这样又可能破坏布局语义和换行行为。
立即学习“前端免费学习笔记（深入）”；
更稳妥的做法是直接控制 <td>：
- 删掉多余包裹层，让文本直接在
<td>里 - 或者用
display: table-cell强制子元素行为（不推荐，增加复杂度） - 若必须用容器，设
display: inline-block+vertical-align: middle，并确保父<td>高度足够（否则看不见居中效果）
vertical-align: middle 不等于“绝对居中”，它依赖行高与字体度量
vertical-align: middle 的实际行为是：把元素的**基线往上移 0.5 行高的距离**，再对齐到父容器的中线。这意味着：
- 如果
<td>没有明确高度，它会按内容撑开，此时“中线”位置取决于内容本身（比如带下划线的文字，基线偏低） - 含不同字号、行高、font-family 的内容，在同一行
<td>中垂直对齐结果可能不一致 - 图片默认
vertical-align: baseline，常导致底部留白；加vertical-align: middle到<img>本身就能解决
所以遇到对不齐，先检查：<td> 是否有固定 height 或 line-height；子元素是否自带 baseline 偏移（如 <img>、<input>）。
现代替代方案：flex 布局更可控，但需注意兼容性
如果目标浏览器支持 Flexbox（IE10+），可以直接用 display: flex 替代：
td {
display: flex;
align-items: center;
justify-content: center;
}这比 vertical-align 更直观，且不受行高、基线影响。但它会改变 <td> 的渲染模型，可能影响表格自动布局（比如 table-layout: auto 下列宽计算异常）。
注意事项：
- 别在
<table>上设display: flex—— 会彻底破坏表格语义和可访问性 - 仅对单个
<td>使用，不影响其他单元格 - 若需支持 IE9 及更早版本，只能坚持用
vertical-align+ 显式line-height模拟
真正麻烦的不是怎么写，而是当单元格里混用图片、按钮、多行文本时，vertical-align 的“中线”定义会变得模糊——这时候 flex 就不只是方便，而是必要。
