text-align: center 必须写在 td 或 th 上才生效，因为 table 不渲染文本流，样式不会自动透传；vertical-align: middle 仅对 td/th 有效且依赖高度空间；废弃 align 和 valign 属性，改用 CSS；复杂内容推荐 display: flex。
text-align: center 必须写在 td 或 th 上才生效
很多人给 table 加 text-align: center，发现文字没居中——因为 table 本身不渲染文本流，它只是容器；真正承载文字的是 td 和 th。浏览器不会把该样式“自动透传”到所有单元格，尤其在 Android WebView、Outlook 渲染器里继承常失效。
正确做法是直接作用于单元格元素：
-
td, th { text-align: center; }—— 全表统一水平居中 -
td:nth-child(3) { text-align: right; }—— 第三列右对齐（适合数值） -
<td class="numeric">+.numeric { text-align: right; }—— 语义化类名更易维护
如果单元格里嵌了 <div> 或 <p>，text-align 对它们无效——这些是块级元素，得单独加 margin: 0 auto 或用 display: flex 控制。
vertical-align: middle 只对 td/th 有效，且依赖高度空间
vertical-align: middle 不是“绝对垂直居中”，它按行内盒基线计算位置。设在 tr 或 table 上完全无效，浏览器会忽略。
立即学习“前端免费学习笔记（深入）”；
常见失效原因：
- 单元格没显式高度，又只有一行文字——实际高度 ≈
line-height，视觉上“看不出居中” -
padding不对称（如padding: 4px 8px），导致内容左右/上下偏移 - 单元格内含多行文本或图片，
vertical-align: middle对齐的是整块内容的中点，不是每行文字中心
稳妥方案：优先用 padding: 8px 12px 替代硬设 height，留出自然呼吸空间；若必须固定高度，搭配 line-height 匹配（单行场景）或改用 flex。
别再用 align="center" 和 valign="middle"
这两个属性在 HTML5 中已废弃。W3C 验证器报错：Attribute align is obsolete. Use CSS instead.。更麻烦的是行为不可控：
-
<table align="center">会让表格变成display: inline-table，导致margin: 0 auto失效 -
<td align="center">在部分旧 WebView 中被 CSS 覆盖后直接不生效 - 无障碍工具可能跳过它，影响屏幕阅读器解析
排查方法：打开开发者工具，检查目标 td 元素是否带 align 属性；全文搜索 HTML 源码，删掉所有 align="" 和 valign=""。兼容旧模板时，只能用 style="text-align: center !important" 强制覆盖，但仅限兜底。
复杂内容建议用 display: flex 替代 vertical-align
当单元格里塞了按钮、图标+文字、徽章等复合结构时，vertical-align 往往力不从心。此时把 td 变成 flex 容器更可控：
<td style="display: flex; align-items: center; justify-content: center;"><button>操作</button></td>
注意三点：
- flex 会覆盖
vertical-align，无需额外清除 -
td默认就是display: table-cell，不用再声明 - 慎用于大量单元格——每个 flex 容器增加渲染开销；纯文本仍优先用
text-align+vertical-align
最容易被忽略的，是 border-collapse: collapse 没加——它会导致相邻单元格边框重叠变粗，视觉上破坏居中感。只要表格有边框，这行 CSS 就不能少。
