如何在HTML表格中通过display:table-cell实现垂直居中布局-html教程-PHP中文网

display: table-cell 在表格元素上无效，因其本就是该类型；它仅适用于非表格元素模拟单元格行为，且需配合 display: table-row、明确高度和 vertical-align: middle 才生效。

如何在html表格中通过display:table-cell实现垂直居中布局

为什么 `display: table-cell` 在表格里不起作用？

直接给 或加 display: table-cell 是无效的——它们本来就是 table-cell，浏览器已内置该行为。真正需要它的是「非表格元素」想模拟单元格行为，比如把

 当作单元格用。但一旦放进真实  结构里，再设这个值会被忽略或触发意外渲染（尤其在旧版 Safari 中可能塌陷）。
vertical-align: middle 为什么只对 table-cell 生效？
这是关键前提：vertical-align 不是“让元素在父容器里垂直居中”，而是控制**行内级或表格单元格内内容的基线对齐方式**。只有当元素的 display 是 table-cell、inline、inline-block 等时才起作用。
对 


 默认就有效，无需额外设置（但显式写上更稳妥）
对包裹在  里的 ，需确保该  是 display: table-cell，且父  高度明确（否则高度由内容撑开，居中无意义）
如果  内有多个行内元素，vertical-align 会影响它们彼此间的对齐，不是整体居中
用 display: table-cell 模拟单元格时的三要素
想用 div + display: table-cell 替代  实现垂直居中，必须同时满足：
父容器设为 display: table-row（不能只设 table，否则子元素无法按行解析）
当前元素设为 display: table-cell + vertical-align: middle

父容器或自身要有明确高度（例如 height: 100px），否则高度为 0 或由内容决定，居中不可见

示例：
<div style="display: table-row">
  <div style="display: table-cell; vertical-align: middle; height: 80px; border: 1px solid #ccc">
    这行文字会垂直居中
  </div>
</div>
比 display: table-cell 更靠谱的现代方案
现在用 display: table-cell 主要是为了兼容 IE9–IE11。但它的限制明显：无法与 Flex/Grid 混用、响应式难控制、嵌套层级易出错。实际项目中更推荐：

											
												
												
													DeepBI DHTML 页面生成器
													生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：

- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；  
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；  
- 提及位于 `apps/console/src/featur
												
												下载
												
											
										
对单个 ：直接用 vertical-align: middle，别动 display
对复杂内容（如图标+文字+按钮）：在  内用 display: flex; align-items: center
需要跨多行居中：用 position: relative + transform: translateY(-50%) 配合 top: 50%，但需父容器有高度
真正容易被忽略的点是：无论用哪种方式，**父容器高度必须可计算**。百分比高度在未定义父高时失效，min-height 不触发 table-cell 的居中逻辑，auto 高度下 vertical-align 也无实际效果。