Grid中margin:auto居中机制是吸走当前轴所有可用空隙，需同时满足：父容器为grid/inline-grid、子元素未被grid-row/column固定、未设置非auto的justify-self/align-self。
Grid中margin:auto的居中机制不是“算剩余空间”
它根本不是传统块级流里那种“用父宽减子宽再均分”的逻辑。Grid布局引擎在GFC（Grid Formatting Context）中把margin: auto直接解释为“吸走当前轴上所有可用空隙”，不管子元素宽高是否固定，也不管父容器有没有显式height。只要该方向存在轨道间隙（来自grid-template-rows、fr单位或gap），它就敢吞。
必须同时满足的三个硬性条件
缺一不可，否则margin: auto会静默失效：
- 父容器必须声明
display: grid或inline-grid，不能只是套了个div里写了grid子项 - 子元素不能被
grid-row或grid-column钉死在具体格子上——否则它没“自由空间”可吸 - 子元素不能同时设置了非
auto的justify-self和align-self，这两个属性优先级高于margin，会覆盖行为
常见失效场景和修复方式
写完margin: auto却没居中？大概率掉进这些坑：
- 父容器没设
min-height或height，导致轨道高度为0 → 加min-height: 100vh或明确写grid-template-rows: 1fr - 子元素写了
width: 100%或height: 100%→ 它已撑满轨道，没空隙可吸 → 改用max-width或直接去掉宽高限制 - 父容器用了
place-items: center还额外加margin: auto→ 多余，且渲染顺序可能导致错位 → 二选一，别叠用 - 子元素是
img且没设display: block→ 默认display: inline，Grid对inline元素的margin: auto处理不可靠 → 加display: block
Grid中margin:auto对gap敏感
这是最容易被忽略的一点：如果父容器设了gap: 20px，那margin: auto吸走的空隙会包含这个gap产生的间隙。视觉上偏移量可能比预期多出一截——它不是bug，是Grid规范定义的行为，但调试时容易误判为定位不准。
立即学习“前端免费学习笔记（深入）”；
