margin: 0 auto 是表格整体居中的唯一可靠方式，需满足表格为块级元素且有明确宽度；text-align: center 仅影响单元格内行内内容对齐，不影响表格位置；flex/grid 适用于复杂布局但不可破坏表格语义。
align 属性在现代 HTML 中完全失效且不合法，别再用它控制表格居中——它既不能让表格整体居中，也不能可靠控制单元格内容对齐。
margin: 0 auto 是表格整体居中的唯一可靠方式
这是最直接、兼容性最好（IE8+）、语义清晰的方案，但必须满足两个前提：
-
table必须是块级上下文中的块级元素（默认就是，无需额外设display: block） -
table必须有明确宽度，否则margin: 0 auto无效
常见错误写法：<table style="margin: 0 auto;">
<br>
→ 没设宽度，浏览器无法计算左右空白，表格仍靠左。<p>正确写法示例：</p>
<pre class="brush:php;toolbar:false;"></pre>
<table style="margin: 0 auto; width: 80%;"><tr>
<td>A</td>
<td>B</td>
</tr></table>
<p>更实用的响应式写法：</p>
<pre class="brush:php;toolbar:false;"></pre>
<table style="margin: 0 auto; width: 100%; max-width: 768px;">
这样宽屏下固定最大宽度居中，窄屏下自动缩为 100% 宽度，不溢出。
<p>注意：如果 <code>table 上写了 width: 100% 且父容器没限制宽度，它会撑满整个父容器，margin: 0 auto 就没效果了。
text-align: center 只影响单元格内容，不影响表格位置
新手常误以为给 table 加 text-align: center 能让表格居中——其实它只作用于表格内部的“行内内容”，比如文字、图片（默认是行内元素），而表格本身仍是块级元素，不会因此移动。
典型误区：
| 文字 |
块级盒子 |
<div> 仍靠左（因为 <code>text-align 对块级子元素无效）。
若要让单元格里嵌套的 <div> 也居中，得单独给它加样式：<pre class="brush:php;toolbar:false;"><td><div style="margin: 0 auto; width: fit-content;">内容</div></td></pre>
<hr>
<h3>Flex/Grid 居中适合复杂布局，但别破坏表格语义</h3>
<p>如果表格需要垂直+水平居中（比如在视口中央），或者父容器本身已有复杂结构，可以用：</p>
<ul>
<li>
<p>Flex 方案（推荐）：</p>
<pre class="brush:php;toolbar:false;"><div style="display: flex; justify-content: center; align-items: center; min-height: 100vh;">
<table>...</table>
</div></pre>
</li>
<li>
<p>Grid 方案（简洁）：</p>
<pre class="brush:php;toolbar:false;"><div style="display: grid; place-items: center; min-height: 100vh;">
<table>...</table>
</div></pre>
</li>
</ul>
<p>⚠️ 注意两点：</p>
<ul>
<li>不要给 <code>table 自己设 display: flex 或 display: grid —— 这会破坏表格的渲染逻辑，colspan/rowspan 可能失效，打印样式也会错乱
position: absolute + transform 居中表格，除非你明确需要脱离文档流；它对可访问性支持差，且依赖父容器有明确高度真正容易被忽略的点在于：“居中”这个词在表格场景里永远指向两个不同对象——是让 table 元素在页面中居中？还是让 td 里的文字/图片居中？混淆这两者，90% 的居中失败都源于此。处理前先问清楚：你要动的是表格本身，还是它肚子里的内容。
