table默认是块级元素但不会自动居中，必须设置明确宽度（如max-width: 800px）并配合margin: 0 auto才能实现居中；align="center"已被html5废弃，存在兼容性、语义和无障碍问题。
table 元素默认是块级框（在块上下文中），但它不会自动居中——必须显式控制布局行为。最稳妥、兼容性最好（IE8+）、语义最清晰的做法，是给 table 本身加 margin: 0 auto，并确保它有明确宽度。
为什么直接写 align="center" 不行
HTML5 已废弃 table 的 align 属性。它在部分浏览器里“看似有效”，实际等价于 style="display: inline-table; text-align: center;"，依赖父容器的 text-align 才能勉强居中，且会导致 margin 失效、响应式错乱、打印样式异常。W3C 验证器会报错，无障碍支持也不可靠。
margin: 0 auto 必须配宽度才能生效
自动外边距只在有“收缩基准”时起作用。如果 table 没设 width，浏览器无法计算左右空隙，margin: 0 auto 就是摆设。
- 推荐写法：
style="width: 100%; max-width: 800px; margin: 0 auto;" -
width: 100%确保窄屏下填满可用空间 -
max-width: 800px防止宽屏下表格过宽、可读性下降 - 避免只写
width: 100%—— 这会让表格撑满父容器，失去“居中感”
用 div 包裹时，别让父容器破坏居中逻辑
常见错误是给包裹 table 的 div 加 text-align: center，再把 table 设为 inline-block。这看似可行，但引入了额外的行内格式化上下文，容易和浮动、flex 子项、或 CSS 重置冲突。
- 更干净的做法：让
div保持默认块级行为，只对table自身设置margin: 0 auto - 如果
div有padding或border，检查是否导致视觉偏移（可用浏览器开发者工具测距） - 绝对不要给
div加float或display: inline，否则table的块级特性会被干扰
复杂点常被忽略：表格内容居中 ≠ 表格自身居中
新手常混淆两个层级：
-
text-align: center作用于td/th，只影响单元格内部文字/图片的水平位置 -
vertical-align: middle作用于td/th，只影响内容在单元格内的垂直位置 - 它们对
table在页面中的位置完全无效
真正决定表格是否“在页面里居中”的，只有 table 元素自身的 margin 和 display 行为。其他所有样式，都是内容层面的微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
