place-items: center 一行实现网格容器内所有未定位子元素居中，等价于 align-items 和 justify-items 同设 center，需父容器有明确高度（如 min-height: 100vh），兼容现代浏览器；单子元素时 margin: auto 更轻量。
用 place-items: center 一行搞定所有子元素居中
如果你的容器已经是 display: grid，那真正需要写的只有一条声明：place-items: center。它等价于同时设置 align-items: center 和 justify-items: center，语义清晰、无歧义——不依赖主轴方向，也不关心子元素是单个还是多个。
常见错误现象：有人误以为 place-items 只对“网格项”生效，于是给子元素加 grid-column 或 grid-row，结果反而破坏了自动居中逻辑；其实只要子元素没被显式定位到某格，place-items 就会自然作用于所有未指定位置的子项。
- 适用场景：弹窗遮罩、空状态提示、登录卡片、全屏加载动画等单层容器+单个内容块
- 注意：父容器必须有明确尺寸（如
height: 100vh或固定高宽），否则高度塌陷，视觉上“没居中” - 兼容性：Chrome 68+、Firefox 63+、Safari 16.4+、Edge 79+，2026 年已覆盖全部主流现代浏览器
单个子元素时，margin: auto 更轻量
当容器是 display: grid 且只有一个直接子元素时，不需要改父容器任何对齐属性，只需在子元素上写 margin: auto。Grid 会自动把它的外边距解析为“在行和列两个方向上均分剩余空间”，效果和 place-items 完全一致，但代码更少、更克制。
容易踩的坑：这个技巧仅对“单个直系子元素”有效；如果子元素内部还有嵌套结构、或父容器里混着文本节点或其他元素，margin: auto 就会失效或表现异常。
立即学习“前端免费学习笔记（深入）”；
- 性能影响：零计算开销，比
place-items略优（少一次样式解析） - 不要和
text-align: center混用——后者对块级子元素无效 - 不适用于 Flex 容器，这是 Grid 特有的行为
place-content 和 place-items 别混用
这两个属性名字像，但作用对象完全不同：place-items 控制的是“每个网格项在单元格内的对齐”，而 place-content 控制的是“所有网格轨道（即整个网格内容区域）在容器内的对齐”。多数居中需求只需要前者。
典型误用：看到文档里说 place-content 也能居中，就把它写在单行单列的 Grid 容器上，结果发现子元素没动——因为此时没有多余轨道空间可分配，place-content 根本不触发。
- 只有当
grid-template-rows或grid-template-columns定义了多条轨道，且内容总尺寸小于容器时，place-content才有实际效果 - 日常开发中，95% 的居中场景应优先考虑
place-items或margin: auto - 查错建议：打开开发者工具，看 computed 面板里
place-content是否被标记为“not applicable”
IE 兼容性不是问题，但别忽略 min-height
现在连 Windows 10/11 默认 Edge 都已弃用旧版 EdgeHTML，IE11 在 2026 年早已退出主流支持范围。所以你大可以放心用 place-items，无需降级到 Flex 或绝对定位。
真正常被忽略的是容器高度。很多人写了 place-items: center 却没设 min-height: 100vh 或显式 height，导致容器高度由内容撑开，视觉上“根本没居中”。
- 推荐写法：
min-height: 100vh比height: 100vh更安全，避免内容超长时溢出 - 响应式场景下，可用
min-block-size: 100vh替代，适配 writing-mode 变化 - 如果容器是 flex 或 block 上下文嵌套进来的，记得检查父级是否限制了高度
margin: auto；多子元素或需语义明确 → place-items: center。其余写法要么冗余，要么引入不必要的约束。 
