最直接有效的方式是给<table>加margin: 0 auto，前提是表格未设width: 100%、未被改为inline-table或浮动，且父容器未使用flex/grid布局；否则需改用flex（justify-content: center）或text-align: center配合display: inline-table。
table 元素加 margin: 0 auto 是最直接有效的方式
表格默认是块级元素，只要它没被改成 display: inline-table、float 或 width: 100%，给 <table> 加 margin: 0 auto 就能水平居中。这不是“可能有效”，而是标准行为。
常见错误现象：表格加了 margin: 0 auto 却没居中——大概率是它被设了 width: 100%，或者父容器有 overflow: hidden 截断了外边距，又或者用了 display: inline-block 却忘了父容器配 text-align: center。
- 必须确保
<table>没有width: 100%（否则左右 margin 自动失效） - 如果用内联样式，写成
<table style="margin: 0 auto;">即可，无需额外 width —— 浏览器会按内容自动计算宽度 - 若需响应式适配，建议用
max-width而非固定width，例如style="margin: 0 auto; max-width: 800px;"
父容器用 Flex 布局时，justify-content: center 更可靠
当表格嵌套在某个 <div> 里，且你已控制该 <div> 的样式，Flex 是目前最稳的方案，尤其适合需要同时垂直居中的场景。
容易踩的坑：只给父容器加 display: flex，却漏了 justify-content: center；或者表格本身设了 width: 100%，导致它撑满父容器，看起来像没居中。
立即学习“前端免费学习笔记（深入）”；
- 父容器代码示例：
<div style="display: flex; justify-content: center;"><table>...</table></div> - 如需垂直居中，加上
align-items: center，但注意父容器得有明确高度（比如min-height: 200px），否则垂直方向无参照 - 避免对
<table>设置margin，Flex 下它会忽略，反而干扰布局
text-align: center 配合 display: inline-table 适用于浮动或流式布局
这个组合本质是把表格当“文字”来处理，靠父容器的文本对齐机制把它推到中间。它不依赖表格宽度，适合宽度不确定或要随内容伸缩的场景。
问题常出在父容器没设 text-align: center，或者表格被意外包裹在另一个未设对齐的容器里，导致层级失效。
- 表格自身加
style="display: inline-table;" - 它的直接父元素（比如
<div>）必须设style="text-align: center;" - 如果父容器有 padding 或 border，视觉上可能偏移，需检查盒模型是否影响实际居中点
别碰 align="center"，它已被 HTML5 废弃
<table align="center"> 或 <td align="center"> 在现代项目里就是技术债。浏览器可能渲染出来，但 W3C 不保证兼容性，验证工具报错，无障碍支持差，移动端 WebView 也可能跳过解析。
更麻烦的是：一旦混用 align 和 CSS，层叠逻辑混乱，调试时根本分不清是谁覆盖了谁。
- 单元格内容水平居中，只用
text-align: center（作用于<td>或<th>） - 整张表在页面中居中，只操作
<table>的 margin 或父容器布局 - vertical-align: middle 是唯一合法的垂直居中方式，但它只对
<td>和<th>生效，不能写在<table>上
width: 100% 锁死的 <table>，再怎么加 margin: 0 auto 都没用；一个嵌套三层的父容器，text-align: center 可能只传到第二层就断了。动手前先看 computed styles，比猜更省时间。 
