网格容器本身不居中需先确保其父容器为flex或块级并设置对齐方式；justify-content/align-content仅在网格容器有剩余空间时生效；IE11不支持这些属性，应改用flex包裹或margin居中。
grid容器本身不居中？先看父容器是否设了display: grid
很多人以为给子元素加 justify-content 或 align-content 就能对齐整个网格，结果没反应——根本原因是：这些属性只对 display: grid 的直接子容器（即网格容器）生效，而你可能正试图在普通 div 上用它们。
真正起作用的前提是：该容器本身是网格容器，且它的父容器是块级或弹性容器，并允许对齐。
- 确保父容器有明确宽度/高度，且不是
display: inline类型 - 如果父容器是
display: block（默认），需手动加text-align: center（仅对行内级网格容器有效）或用margin: 0 auto（对块级网格容器） - 更可靠的做法：把父容器设为
display: flex，再用justify-content和align-items居中网格容器本身
justify-content / align-content 没效果？检查网格轨道是否有多余空间
这两个属性只在网格容器的内联轴（justify-content）和块轴（align-content）上存在「剩余空间」时才起作用。换句话说：如果网格内容撑满了容器，或者你只定义了一行一列且没留空隙，它们就完全不会动。
-
justify-content: center要求容器宽度 > 所有列宽 + 间隙之和 -
align-content: center要求容器高度 > 所有行高 + 间隙之和 - 常见误操作：用
grid-template-columns: 1fr却期望水平居中——1fr会直接占满可用空间，不留余量 - 想留空，改用
grid-template-columns: max-content或显式固定宽（如200px），再配合justify-content
想让网格整体居中，最稳的方式是用flex套一层
别跟 justify-content 死磕。90% 的实际场景里，用 Flex 布局包裹 Grid 容器，反而更可控、兼容性更好、调试直观。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex，加justify-content: center和align-items: center - 网格容器自身设为
display: grid，无需额外对齐属性 - 注意：若网格容器有
width或height，它就是个普通块盒；若没设，它可能收缩到内容大小，flex 才能把它当一个“盒子”来居中 - 示例：
.wrapper { display: flex; justify-content: center; align-items: center; } .grid { display: grid; grid-template-columns: repeat(3, 100px); gap: 10px; }
IE11 下 grid 对齐完全失效？别碰 justify-content / align-content
IE11 的 CSS Grid 实现（基于旧草案）根本不支持 justify-content 和 align-content。强行写上去等于白写，还可能干扰其他样式解析。
- 检测是否需要兼容 IE11：直接查 Can I Use，别信“加前缀就能行”
- 替代方案只有两个：
margin: 0 auto（水平居中，需设宽度）或外层display: -ms-flexbox（IE 专用 flex） - 如果用了 Autoprefixer，它不会为这两个属性加
-ms-前缀，因为规范里就没这玩意 - 真要兼容，建议降级为
display: inline-block+text-align: center父容器，比硬撑 grid 对齐更靠谱
