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"> + <code>.numeric { text-align: right; }—— 语义化类名更易维护如果单元格里嵌了
<div> 或 <code><p></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"> 会让表格变成 <code>display: inline-table，导致margin: 0 auto失效<td align="center"> 在部分旧 WebView 中被 CSS 覆盖后直接不生效 <li>无障碍工具可能跳过它，影响屏幕阅读器解析</li> <p>排查方法：打开开发者工具，检查目标 <code>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 就不能少。- flex 会覆盖
- 单元格没显式高度，又只有一行文字——实际高度 ≈
