表格在页面中水平居中唯一可靠方式是margin: 0 auto，但必须同时满足：表格有明确宽度（如width: 80%或max-width: 800px），且父容器为普通块级流（非flex/grid/float等）。
表格在页面中默认左对齐，align="center" 已被 HTML5 移除，写上也不起作用——这不是兼容性问题，而是语法非法，验证器报错、无障碍断裂、部分 WebView 直接忽略。
整张表格在页面中水平居中：只用 margin: 0 auto
这是最可靠、兼容 IE8+、无需 JS 的方案，但有两个硬性前提必须同时满足：
-
table必须有明确宽度，比如width: 80%、width: 600px或响应式组合width: 100%; max-width: 800px；width: 100%单独用会失效，因为左右没空余可分配 margin - 父容器不能是
float、display: inline、overflow: hidden或 Flex/Grid 容器（否则会干扰块级流） - 别给
table加display: inline-table或float，它们会让margin: 0 auto彻底失效
推荐写法：<table style="margin: 0 auto; width: 100%; max-width: 800px;">
<h3>单元格内容水平居中：必须作用在 <code>td 或 th 上
text-align: center 控制的是单元格内部行内内容（文字、图片、span）的对齐，它对 table 或 tr 无效——加在 table 上等于白写。
立即学习“前端免费学习笔记（深入）”；
- 单个单元格：
<td style="text-align: center;">内容</td> - 整表统一：
table td, table th { text-align: center; }（别漏掉th） - 按列控制（如金额列右对齐）：
td:nth-child(3), th:nth-child(3) { text-align: right; } - 如果
td里嵌了<div>，<code>text-align: center不会穿透生效，得单独给div加margin: 0 auto或display: flex; justify-content: center单元格内容垂直居中：用
vertical-align: middle，但别设死heightvertical-align: middle只对td和th有效，写在table或tr上完全没反应。它不是让表格在页面中垂直居中，而是控制单元格内“行内盒”在行高范围内的垂直位置。- 统一设置：
td, th { vertical-align: middle; } - 常见“看起来没居中”是因为：
height设得太小（比如height: 20px），而默认行高 > 字号；建议用padding: 8px 12px替代硬 height - 含多行文本时，
vertical-align: middle对齐的是整行盒中点，不是每行文字中心——这是规范行为，不是 bug - 别给
tr设vertical-align，W3C 明确不支持
跨列单元格（
colspan）怎么居中colspan合并后，居中样式不会从tr或table继承，必须显式加在该td或th上。- 错误写法：
<tr style="text-align:center"><td colspan="2">标题</td></tr>→ 无效 - 正确写法：
<td colspan="2" style="text-align:center">标题</td> -
colspan值不能超过当前行总列数（如共 3 列，colspan="4"会导致后续单元格偏移、结构错乱） - 若需视觉上更稳的居中分隔，可配合
table-layout: fixed和等宽th/td设置
真正容易被忽略的点是：表格语义和布局逻辑强耦合。用 Flex/Grid 包裹表格虽能“居中”，但可能破坏
colspan/rowspan渲染、影响打印预览和屏幕阅读器识别——除非你确定这张表只是视觉容器，而非数据结构。 - 统一设置：
