align属性在HTML表格中已废弃，必须用text-align控制水平对齐、vertical-align控制垂直对齐，二者作用域不同且不可互替。
align 属性在 HTML 表格中早已失效，不能靠它控制单元格内容对齐 —— 无论你写 <td align="center"> 还是 <th align="right">，都只是“看起来还行”，实际是浏览器在兼容模式下偷偷兜底，不是标准行为。
为什么 align 属性现在不能用了
HTML5 明确废弃了所有元素的 align 属性（包括 <table>、<tr>、<td>、<th>）。W3C 不再验证它，主流构建工具（如 Vite、Webpack 的 HTML 插件）会报 warning，部分无障碍阅读器直接忽略，某些 WebView（尤其是 Android 低版本系统内置浏览器）会彻底不渲染该样式。
常见错误现象：
- 本地开发时
<td align="center">文字</td>显示居中，上线后被 CSS 框架（如 Bootstrap）覆盖，变成左对齐 - 用 Chrome DevTools 查看 computed styles，发现
text-align值是start或left，而不是预期的center - 表格嵌套在 Flex 容器里时，
align完全不起作用，连兼容兜底都不触发
text-align 是唯一可靠方案
控制单元格内容水平对齐，只认 text-align。它作用对象是单元格内的「行内内容」：文本、<img>（默认 inline）、<span> 等。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 单个单元格：直接加内联样式
<td style="text-align: center;">数据</td> - 整列统一居中：用
<col>标签配合类名，例如<col class="num-col">，再写 CSS.num-col { text-align: right; } - 整行右对齐：给
<tr>设style="text-align: right;"，但注意这会被子单元格自己的text-align覆盖（CSS 层叠规则） - 避免滥用
!important—— 如果某列没居中，大概率是父级<tbody>或更外层容器设了text-align: left且未被重置，而不是“没生效”
vertical-align 控制垂直方向，不是 align
单元格内容上下对齐靠 vertical-align，不是废弃的 valign 属性（同样已废）。它的取值有 top、middle、bottom、baseline，默认是 middle。
关键细节：
-
vertical-align只对display: table-cell元素（即<td>、<th>）生效，给<div>设它无效 - 它控制的是单元格内容相对于「单元格自身高度」的对齐位置，不是相对于整行或整表
- 如果单元格里塞了一个
<div style="height: 100px;">，而单元格本身只有 24px 高，vertical-align: middle会让该<div>的顶部对齐到单元格中间线，视觉上可能“悬空”
表格整体居中 ≠ 单元格居中
想让整个表格在页面里水平居中，操作对象是 <table> 元素本身，用 margin: 0 auto；想让单元格里文字居中，必须用 text-align: center。这两者完全无关，也不能互相替代。
容易踩的坑：
- 给
<td>设margin: 0 auto——<td>是display: table-cell，W3C 规范明确禁止对其设置 margin，浏览器会静默忽略 - 给
<table>设text-align: center，以为能“带动”里面所有内容居中 —— 它确实会让所有<td>继承该值，但如果某个<td>自己写了text-align: left，那它就还是左对齐 - 单元格里放了
<div>（display: block），只设text-align: center到<td>，结果<div>还是贴左 —— 因为text-align不影响块级元素自身位置，只影响其内部行内内容
真正复杂的地方在于：text-align 和 vertical-align 的作用域完全不同，一个管“字怎么摆”，一个管“块怎么挂”，混用时得清楚当前元素的 display 类型和继承链。别指望一个属性解决所有对齐问题。
