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