表格内文字居中必须同时设置text-align: center和vertical-align: middle于或元素上，因前者仅控水平、后者专管垂直，且vertical-align对和无效。

表格内文字居中必须同时设置 text-align: center 和 vertical-align: middle，且这两个声明必须作用在 或 上，而不是

或 。

为什么只写 text-align: center 不够

它只能控制水平方向；垂直方向默认虽是 middle，但极易被以下因素干扰：

• padding 过大或不一致，视觉上拉偏位置
• 单元格内嵌套了
  、 等元素，自带 margin 或 line-height
• 父级设置了 line-height，而内容高度与之不匹配
• 用了 border-collapse: separate（默认），边框间距导致对齐基准错乱

最简可靠写法：类名统一控制

避免内联样式和全局污染，推荐定义一个 CSS 类：

.center-cell {
  text-align: center;
  vertical-align: middle;
}

然后在需要的单元格上应用：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

<td class="center-cell">数据</td>
<th class="center-cell">表头</th>

注意：vertical-align 对

无效，对 完全无效 —— 它只在 display: table-cell 元素（即

/	）上起作用。 表头居中 + 内容左对齐？分开写选择器 新手常误用通配规则，结果把	和	一起覆盖。正确做法是明确区分： th { text-align: center; } td { text-align: left; } /* 垂直方向统一控制 */ th, td { vertical-align: middle; } 这样既保留表头语义（加粗+居中），又让正文保持可读性（左对齐）。如果用了 border-collapse: collapse，记得给 th 和 td 统一设 border，否则边框粗细可能不一致。 容易忽略的兼容性细节 某些旧版 IE 或打印样式中，vertical-align: middle 在含图标或行内块元素的单元格里仍会偏移。此时可临时补救： 确认 box-sizing 是 border-box，避免 padding 溢出干扰 避免给	设固定 height 而不配 line-height 若内容是单行文本，line-height 等于单元格高度也能强制垂直居中（但仅限单行） 真正难搞的不是“怎么写”，而是“写在哪”——vertical-align 必须落在单元格自身，不能靠父级继承或容器 flex 包裹来“代劳”，否则在导出 PDF 或打印预览时大概率失效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！