HTML表格中table-cell在垂直对齐时的特殊表现-html教程-PHP中文网

默认就是table-cell，显式设置无效且可能引发兼容性问题；vertical-align控制单元格内内容对齐而非自身位置；用display:table-cell模拟单元格需父为table-row、自身为table-cell+vertical-align、有明确高度；现代开发优先使用flex/grid。

html表格中table-cell在垂直对齐时的特殊表现

为什么给 <td> 加 <code>display: table-cell 没效果

因为 <td> 本来就是 <code>table-cell，浏览器已按该行为渲染。显式设置不仅多余，还可能触发旧版 Safari 的塌陷 bug 或被忽略——尤其在嵌套表格或 CSS reset 后更易出问题。

检查开发者工具的 computed 样式，会发现 display 值仍是 table-cell，但不是你写的那条规则生效的
真正需要 display: table-cell 的是 <div>、<code><span></span> 这类非表格元素，想模拟单元格行为时
如果误加在 <td> 上又同时用了 <code>float 或 position: absolute，会导致布局完全失效
vertical-align: middle 在表格里到底对谁起作用

它不控制 <td> 自身在 <code><tr> 中的位置，而是控制 <code><td> 内部内容（文本、行内元素、inline-block 元素）在单元格内的基线对齐方式。 <ul> <li>对纯文本默认就生效，无需额外写 <code>vertical-align
对 <div> 子元素不起作用，除非该 <code><div> 是 <code>display: inline-block 或 display: table-cell
若 <td> 高度由内容撑开（比如没设 <code>height 或 min-height），vertical-align 看不出效果——因为没有“可对齐的空间”
多个行内元素并排时，vertical-align 影响它们彼此间的上下对齐关系，不是整体居中到单元格中央

用 `display: table-cell` 模拟单元格时必须满足的三个条件

想用 <div class="cell"> 替代 <code><td> 实现垂直居中，缺一不可： <ul> <li>父容器必须是 <code>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 等现代特性协同工作。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

仅当项目仍需支持 IE9–IE11 且不能引入 Polyfill 时才考虑
若只是想让单个元素在固定高容器中居中，flex 更直接：display: flex; align-items: center; justify-content: center
表格结构本身已有语义，强行用 div+table-cell 模拟反而增加可访问性风险

真正容易被忽略的是：vertical-align 的生效前提不是“父容器有多高”，而是“当前元素是否属于可对齐的显示类型”，以及“它的父容器是否提供了有效的行上下文”。这点在调试时经常被跳过。