HTML5 中 align 和 valign 已废弃，应改用 text-align: center 实现水平居中、vertical-align: middle 实现单元格内垂直居中，表格整体居中用 margin: 0 auto 或父容器 text-align: center。

align 和 valign 是 HTML 4 时代的原生属性，现在**不能用、不该用、不推荐用**——它们在 HTML5 中已被正式废弃，W3C 不再保证支持，验证工具会报错，部分 WebView 或无障碍工具会直接忽略。

为什么 align="center" 看似有效但实际危险？

本地测试时它可能“看起来”能居中，但问题藏在背后：

• align 属于表现层属性，与语义分离，违反现代 HTML/CSS 分离原则
• 一旦页面引入 CSS（哪怕只是重置样式），align 极易被覆盖且难以调试
• 在严格 DOCTYPE（）下属于无效标记，某些构建工具或 CI 流程会直接失败
• 移动端 WebView（如某些安卓系统内置浏览器）对废弃属性兼容性差，上线后突然失效

text-align: center 才是单元格文字水平居中的唯一可靠方式

它作用于单元格内的行内内容（文本、、等），不是单元格本身：

HTML设计工具专业版

企业级HTML/CSS设计系统,支持设计令牌、组件库、批量生成、主题切换与团队协作,适合团队与商业项目。

下载

• 对单个单元格：写 内容
• 对整列：用 + CSS .center-col { text-align: center; }
• 对整张表：写 td, th { text-align: center; }，但注意它不会影响块级子元素（比如
  ）
• 如果单元格里放了
  ，它默认是块级元素，text-align 对它无效——得单独给该

  设 margin: 0 auto 或用 display: flex

  vertical-align: middle 是垂直居中的正确写法

  它只对 和 生效，不能用于

  或 ：

  • 写法必须是

  或统一 CSS td, th { vertical-align: middle; }

  别指望 vertical-align 能让多行文本“上下居中”——它只控制单元格内行框（line box）的对齐位置，对高度不固定的文本效果有限

  若单元格内容是图片或单行文本，vertical-align: middle 通常足够；若含多段

  或复杂布局，建议改用 display: flex + align-items: center

  vertical-align 的取值只有 top / middle / bottom / baseline，没有 center —— 写 center 是无效的

  整个表格在页面中水平居中，不是靠 align，而是靠 margin: 0 auto

  这个操作对象必须是

  内容

  元素本身：

  • 正确：

  ，前提是 没有设 width: 100% 或其他撑满父容器的规则

  错误：

  或给

  加 margin: 0 auto ——

  是 display: table-cell，W3C 明确禁止对其设置 margin

  更稳妥的做法：把 包进一个

  ，利用父容器的 text-align 触发表格的“行内居中行为”（因为

  默认是块级，但在 text-align: center 的父容器中会被当行内块处理）

  真正容易被忽略的点在于：居中不是单一属性的事。文字是否居中，取决于内容类型（行内 or 块级）、父容器 display 类型、CSS 继承链是否被意外中断——很多时候你以为改了 text-align 就完事，结果发现里面套了个

  ，它自己没设宽度也没居中逻辑，就卡在那里不动。