text-align 和 vertical-align 必须同时设置才能实现单元格内容完全居中：前者控制水平对齐，后者控制垂直对齐；单独使用任一属性均无法达成整体居中效果。
td 的 text-align 和 vertical-align 必须同时设，不能只靠一个
单独设 text-align 只管左右，单独设 vertical-align 只管上下，两者作用域不同、互不替代。常见错误是只写 text-align: center 就以为“居中了”，结果内容贴着单元格顶部；或只设 vertical-align: middle，文字却靠左挤成一坨。
实操建议：
-
text-align作用于td或th内的文本、<img>（默认 inline）、<span>等行内内容 -
vertical-align只对td、th元素本身生效，控制其内部内容在单元格高度范围内的上下位置 - 若要整张表所有单元格水平+垂直居中，推荐统一写：
td, th { text-align: center; vertical-align: middle; } - 若某列需右对齐+垂直居中，用：
td:nth-child(3) { text-align: right; vertical-align: middle; }
vertical-align: middle 没效果？先看单元格有没有“高度空间”
vertical-align: middle 不是“把内容拉到表格中间”，而是把内容在当前单元格高度范围内做相对居中。如果单元格只有单行文字撑开（比如 20px 高），middle 就没地方可“居”——视觉上几乎看不出变化。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 没设
min-height或padding，导致单元格实际高度太小 - 单元格里嵌套了
<div>、<p>等块级元素，它们不响应vertical-align（该属性对块级子元素无效） - 同一行中某列内容很高（如多行文本或图片），把整行
<tr>拉高，其他列即使设了middle，也可能因自身内容短而显得“偏上”
解决方法：给 td 加 min-height: 48px 或 padding: 12px 8px，确保有足够视觉余量。
复杂内容（图标+文字+按钮）别硬扛 vertical-align，改用 flex
当 td 里不止一行文本，还混着 <img>、<button>、<span> 多种类型元素时，vertical-align 基于行框和基线计算，行为不可控——比如图标可能和文字错位，按钮被压到边缘。
这时直接把 td 当 flex 容器更稳：
- 加
display: flex+align-items: center实现垂直居中 - 再加
justify-content: center实现水平居中（可选） - 必须配
min-height或height，否则 flex 容器高度塌陷 - IE11 需补
-ms-display: flex和-ms-align-items: center，但基础居中可用
示例：
<td style="display: flex; align-items: center; min-height: 48px;"><span>审核中</span><img src="icon.png" style="margin-left: 8px;"></td>
别用 align 和 valign 属性，它们现在就是摆设
align 和 valign 在 HTML5 中已废弃，Chrome/Firefox/Edge ≥90、Safari 全部忽略。写了不会报错，但也不会生效——DevTools 的 Styles 面板里根本看不到它，Computed 里也查不到对应值。
为什么还有人看到“好像有用”？那是浏览器在兼容模式下偷偷兜底，仅限极简 HTML 场景。一旦引入 CSS 框架（如 Bootstrap）、嵌套在 Flex 容器里，或经过构建工具处理，立刻失效。
真实风险点：
- 本地开发看着正常，上线后被框架样式覆盖，变成左对齐
- 无障碍阅读器跳过这些属性，影响可访问性
- Vite/Webpack 的 HTML 插件会警告“deprecated attribute”，CI 可能失败
唯一可靠路径：全部用 text-align 和 vertical-align，或者现代布局（flex/grid）。
vertical-align 对高度的隐式依赖，以及混合内容下基线计算的不可预测性。写完记得打开 DevTools 看 computed height 和 line-height，比猜更准。 
