HTML5 中 align 属性已废弃，表格居中应使用 margin: 0 auto（需显式设 width），单元格内容水平居中用 text-align: center，垂直居中用 vertical-align: middle（仅对 td/th 有效）。
align 属性在 HTML5 中已完全废弃，不能用于控制表格在页面中的位置，也不能可靠控制单元格内容对齐 —— 浏览器可能兼容，但验证失败、无障碍支持缺失、移动端 WebView 易失效。
为什么 align="center" 在 <table> 上看似有效却不可靠
常见错误现象：本地测试时 <table align="center"> 看起来居中了，但上线后被 CSS 覆盖、或在 iOS WKWebView / Android Chrome 低版本中偏左；W3C 验证器直接报错 Attribute align not allowed on element table。
根本原因：align 是 HTML4 时代遗留属性，HTML5 规范明确移除，它不参与 CSS 盒模型计算，也不响应现代布局上下文（如 Flex/Grid 容器）。
- 别把它当“还能用的快捷方式”——这是技术债，不是权宜之计
- 若项目需通过 WCAG 或企业级合规审计，
align属于必须清理项 - 服务端渲染（如 ASP.NET Web Forms 的
HtmlTable.Align）属框架封装层行为，输出到浏览器仍是无效 HTML
让整个表格在页面中水平居中：只用 margin: 0 auto
这是最轻量、兼容性最好（IE8+）、语义清晰的方案，前提是 <table> 是块级元素且宽度未占满父容器。
立即学习“前端免费学习笔记（深入）”；
正确写法：
<table style="margin: 0 auto; width: 800px;"> <tr><td>内容</td></tr> </table>
-
width必须显式设置（像素、百分比、max-content均可），否则margin: 0 auto无效 - 父容器不能是
display: inline或float: left，否则<table>无法触发块级居中逻辑 - 避免给
<table>设width: 100%—— 它会撑满父容器，margin失效
让单元格内容水平居中：只用 text-align: center
text-align 控制的是单元格内**行内内容**（文本、<img>、<span>）的水平位置，和 align 无关，也和单元格自身位置无关。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
常用做法：
- 单个单元格：
<td style="text-align: center;">文字</td> - 整列统一：
<col class="center-col">+.center-col { text-align: center; } - 整表默认：
table td, table th { text-align: center; }，再用更具体选择器覆盖例外项
容易踩的坑：
-
<td style="text-align: center;"><div>块级元素</div></td>→<div>不会居中，因为它默认display: block，需额外设margin: 0 auto或text-align: center在<div>自身 - 图片加了
display: block后，text-align: center对它失效，得用margin: 0 auto或 Flex
垂直居中必须用 vertical-align: middle，且只对 <td> 和 <th> 有效
vertical-align 是表格单元格的专属属性，作用对象是单元格内容在行框（line box）内的垂直位置，不是整个单元格在表格中的位置。
正确用法：
- 单个单元格：
<td style="vertical-align: middle;">内容</td> - 整表统一：
td, th { vertical-align: middle; }
关键限制：
-
vertical-align不能用在<table>或<tr>上 —— 浏览器忽略 - 若单元格内嵌套了
display: flex或display: grid的容器，vertical-align对该容器内部无效，需在子容器上另行控制 - 多行文本垂直居中效果依赖行高（
line-height），单纯vertical-align: middle对段落级<p>效果有限，此时更适合用 Flex
真正麻烦的点不在“怎么写”，而在“谁覆盖了你写的样式”——text-align 和 vertical-align 极易被继承链或通用重置样式（如 * { text-align: left; }）悄悄干掉。调试时优先检查 computed styles，而不是反复改内联 style。
