表格内文字居中必须同时设置text-align: center和vertical-align: middle于<td>或<th>元素上，因前者仅控水平、后者专管垂直，且vertical-align对<tr>和<table>无效。
表格内文字居中必须同时设置 text-align: center 和 vertical-align: middle，且这两个声明必须作用在 <td> 或 <th> 上，而不是 <table> 或 <tr>。
为什么只写 text-align: center 不够
它只能控制水平方向；垂直方向默认虽是 middle，但极易被以下因素干扰：
-
padding过大或不一致，视觉上拉偏位置 - 单元格内嵌套了
<p>、<span>等元素，自带margin或line-height - 父级设置了
line-height，而内容高度与之不匹配 - 用了
border-collapse: separate（默认），边框间距导致对齐基准错乱
最简可靠写法：类名统一控制
避免内联样式和全局污染，推荐定义一个 CSS 类：
.center-cell {
text-align: center;
vertical-align: middle;
}然后在需要的单元格上应用：
立即学习“前端免费学习笔记（深入）”；
<td class="center-cell">数据</td> <th class="center-cell">表头</th>
注意：vertical-align 对 <tr> 无效，对 <table> 完全无效 —— 它只在 display: table-cell 元素（即 <td>/<th>）上起作用。
表头居中 + 内容左对齐？分开写选择器
新手常误用通配规则，结果把 <th> 和 <td> 一起覆盖。正确做法是明确区分：
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溢出干扰 - 避免给
<td>设固定height而不配line-height - 若内容是单行文本，
line-height等于单元格高度也能强制垂直居中（但仅限单行）
真正难搞的不是“怎么写”，而是“写在哪”——vertical-align 必须落在单元格自身，不能靠父级继承或容器 flex 包裹来“代劳”，否则在导出 PDF 或打印预览时大概率失效。
