<td>默认就是table-cell，显式设置无效且可能引发兼容性问题；vertical-align控制单元格内内容对齐而非<td>自身位置；用display:table-cell模拟单元格需父为table-row、自身为table-cell+vertical-align、有明确高度；现代开发优先使用Flex/Grid。
为什么给 <td> 加 display: table-cell 没效果
因为 <td> 本来就是 table-cell，浏览器已按该行为渲染。显式设置不仅多余，还可能触发旧版 Safari 的塌陷 bug 或被忽略——尤其在嵌套表格或 CSS reset 后更易出问题。
- 检查开发者工具的 computed 样式，会发现
display值仍是table-cell，但不是你写的那条规则生效的 - 真正需要
display: table-cell的是<div>、<span>这类非表格元素，想模拟单元格行为时 - 如果误加在
<td>上又同时用了float或position: absolute，会导致布局完全失效
vertical-align: middle 在表格里到底对谁起作用
它不控制 <td> 自身在 <tr> 中的位置，而是控制 <td> 内部内容（文本、行内元素、inline-block 元素）在单元格内的基线对齐方式。
- 对纯文本默认就生效，无需额外写
vertical-align - 对
<div>子元素不起作用，除非该<div>是display: inline-block或display: table-cell - 若
<td>高度由内容撑开（比如没设height或min-height），vertical-align看不出效果——因为没有“可对齐的空间” - 多个行内元素并排时，
vertical-align影响它们彼此间的上下对齐关系，不是整体居中到单元格中央
用 display: table-cell 模拟单元格时必须满足的三个条件
想用 <div class="cell"> 替代 <td> 实现垂直居中，缺一不可：
- 父容器必须是
display: table-row（不能只设display: table，否则子元素无法解析为“行内单元格”） - 当前元素设
display: table-cell+vertical-align: middle - 要么父
table-row有明确高度，要么自身设height或min-height；否则高度为 0，居中不可见
示例：
<div style="display: table-row"><br> <div style="display: table-cell; vertical-align: middle; height: 80px; border: 1px solid #ccc"><br> 这行文字会垂直居中<br> </div><br></div>
立即学习“前端免费学习笔记（深入）”；
IE9–IE11 之外，现在还该用 display: table-cell 吗
基本不用了。它和 Flex/Grid 不兼容，响应式控制困难，嵌套层级稍深就容易错乱，且无法与 gap、aspect-ratio 等现代特性协同工作。
- 仅当项目仍需支持 IE9–IE11 且不能引入 Polyfill 时才考虑
- 若只是想让单个元素在固定高容器中居中，
flex更直接：display: flex; align-items: center; justify-content: center - 表格结构本身已有语义，强行用
div+table-cell模拟反而增加可访问性风险
真正容易被忽略的是：vertical-align 的生效前提不是“父容器有多高”，而是“当前元素是否属于可对齐的显示类型”，以及“它的父容器是否提供了有效的行上下文”。这点在调试时经常被跳过。
