vertical-align: middle 在 td 上不生效的根本原因是单元格缺乏明确高度或足够空间，且该属性仅对 table-cell 元素有效；常见误区包括对非 table-cell 元素使用、未设置 height/min-height、子元素为块级导致失效。
vertical-align: middle 为什么在 td 上不生效？
常见现象是写了 vertical-align: middle 却没效果，本质原因就一个：它只对 display: table-cell 或原生表格单元格（td/th）起作用，且依赖单元格有明确高度或足够空间。
容易踩的坑包括：
- 给
div直接加vertical-align: middle—— 无效，因为默认是display: block -
td高度由内容撑开，没有显式height或min-height，导致“居中”视觉上无变化 - 单元格内嵌套了
div或span等块级元素，而vertical-align不作用于其子元素
用 display: table-cell 实现任意容器垂直居中
这不是给 HTML 表格用的，而是把普通 div “假装”成表格单元格，从而启用 vertical-align。这是兼容性好、语义清晰的老办法。
实操要点：
- 父容器设为
display: table，宽度/高度需明确（比如height: 200px） - 子容器设为
display: table-cell，再加vertical-align: middle - 水平居中可同时加
text-align: center（对内联内容）或配合margin: auto（对块级子元素）
示例：
.container {
display: table;
width: 100%;
height: 300px;
}
.content {
display: table-cell;
vertical-align: middle;
text-align: center;
}
table-cell 方案和 Flex/Grid 的取舍
虽然 display: table-cell 能用，但现代项目里它常被替代，原因很实际：
-
flex更直观：display: flex; align-items: center; justify-content: center一行搞定，且支持响应式伸缩 -
grid更强大：display: grid; place-items: center同样简洁，还能处理多子项布局 -
table-cell的缺点：父容器必须定高，否则无法触发垂直居中；不能与margin、float混用；IE8+ 支持虽好，但语义偏离布局意图
除非要兼容 IE9 及更老浏览器，否则优先选 flex。
表格内部单元格真正需要的设置
如果你就是在写 <table>，那根本不用改 <code>display，直接用原生能力就行：
- 所有
td和th默认就是display: table-cell，vertical-align: middle天然有效 - 推荐统一用 CSS 控制，而不是内联
valign="middle"（已过时，HTML5 不鼓励） - 若某列内容偏高（比如含图片或长文本），可单独加
min-height或padding，避免因行高不一致导致“看起来没居中”
简写示例：
td, th {
vertical-align: middle;
text-align: center;
padding: 12px 8px;
}
真正麻烦的从来不是怎么写，而是忘记检查单元格是否被 line-height、padding 或嵌套结构悄悄破坏了基线——这点比语法本身更常导致失效。
