table加margin: 0 auto必须配width或max-width，因table默认display: table且宽度由内容撑开，无收缩基准，浏览器无法计算左右空隙；只写margin: 0 auto或width: 100%均无效。
table加margin: 0 auto必须配width或max-width
直接写 margin: 0 auto 不生效，是因为 table 默认是 display: table，宽度由内容撑开，没有“收缩基准”，浏览器无法计算左右空隙。必须显式给它一个可衡量的宽度。
常见错误是只写 margin: 0 auto，或者只写 width: 100%——后者会让表格填满整个父容器，失去居中视觉效果。
-
width: 700px; margin: 0 auto;：适合内容稳定、宽度可控的场景 -
width: 100%; max-width: 800px; margin: 0 auto;：响应式首选，窄屏下自适应，宽屏下以 800px 居中 - 避免用
width: 90%而不设max-width，小屏时可能因内边距/边框导致横向滚动
父容器不能破坏文档流
如果表格外层有 float、display: inline 或 position: absolute 的容器，margin: 0 auto 会失效——因为这些声明让元素脱离常规块级上下文。
检查父级是否意外设置了以下样式：
-
float: left或float: right -
display: inline、display: inline-block（除非你明确想用 inline-table 方案） -
position: absolute且没配left/right控制
最稳妥做法：确保表格的直接父容器是普通块级元素（如 <div>），没加干扰布局的 CSS。
<h3>别用 align="center" 或 <center> 标签</center>
</h3>
<p><code>align="center" 在 HTML5 中已废弃，W3C 验证器会报错；<center></center> 同样被移除。它们在部分浏览器里“看似有效”，实际行为不可靠：
- 等价于
style="display: inline-table; text-align: center;"，依赖父容器的text-align - 会导致
margin失效、打印样式异常、无障碍阅读器识别错误 - 在 flex/grid 容器中完全不生效
现代项目里，一律用 CSS 控制，不要在标签上写对齐属性。
Flexbox方案要小心 colspan/rowspan 渲染异常
用 display: flex + justify-content: center 确实能居中，但要注意：<table> 是语义化结构型元素，在 flex 容器中会被当作单个 flex item 处理，这可能导致：
<ul>
<li>
<code>colspan/rowspan 单元格渲染错位（尤其在 Safari 和旧版 Chrome）
除非你明确需要垂直+水平同时居中，且确认目标环境兼容性良好，否则优先选 margin: 0 auto 方案更稳妥。
