margin: 0 auto 不生效最常见原因是表格未设明确宽度或父容器破坏块级流；必须设置具体宽度（如 width: 800px），且确保父容器无 float、inline 显示或绝对定位干扰。
为什么 margin: 0 auto 不生效？
最常见的情况是：表格没设宽度，或者父容器破坏了块级流。浏览器对 <table> 默认渲染为 display: table，它虽是块级元素，但 margin: 0 auto 只在有明确宽度时才触发居中计算。
- 必须给
<table>设置具体宽度，比如width: 800px或max-width: 90% - 避免父容器有
float、display: inline或position: absolute，这些会让auto失效 - 不要只写
margin: auto—— 必须是margin: 0 auto（上下为 0，左右自动）
用 Flexbox 居中时要注意什么？
Flex 方案最可靠，但容易忽略父容器的“高度支撑”问题——如果父容器没高度，align-items: center 垂直居中就看不到效果。
- 把
<table>包进一个<div>，并给这个<div>加display: flex; justify-content: center; align-items: center; - 若想让表格在视口垂直居中，父容器需有高度，例如
min-height: 100vh - 表格自身别设
width: 100%，否则会撑满父容器，看起来像没居中
为什么 text-align: center + display: inline-table 有时偏移？
这个组合依赖文本对齐机制，但容易被父容器的 padding、border 或字体基线干扰，视觉上“看似没居中”。
- 确保父容器是块级（如
<div>），且没设置line-height异常值 -
<table>设display: inline-table，不是inline-block（后者可能多出空白间隙） - 若表格内有图片或按钮等替换元素，它们的默认
vertical-align: baseline会拉低整体位置，可统一加vertical-align: middle
Grid 居中要不要设宽度？
不用。Grid 的 place-items: center 是二维控制，不依赖表格自身尺寸，但前提是父容器得是 display: grid。
立即学习“前端免费学习笔记（深入）”；
- 直接给父容器加
display: grid; place-items: center;即可 - 如果父容器还有其它子元素，它们也会被居中——需要单独定位时，改用
justify-self: center; align-self: center;作用于表格本身 - 旧版 Safari 对
place-items支持弱，如需兼容 iOS 13 以下，改用justify-items: center; align-items: center;
