place-items: center可一键实现所有直接子元素水平垂直居中，等价于justify-items: center和align-items: center，但要求父容器设display: grid且具备可测量高度（如min-height: 100vh），不适用于仅居中单个子项。
用 place-items: center 实现一键居中
只要父容器是 Grid 容器，place-items: center 就能同时搞定水平和垂直居中，不用管子元素宽高、类型或数量。它等价于 justify-items: center + align-items: center，作用于所有直接子元素。
常见错误是只给子元素设 display: grid，却忘了在父容器上启用 Grid —— 居中必须作用在容器上，不是元素本身。
- 父容器必须设置
display: grid，否则place-items无效 - 如果父容器没有明确高度（比如仅靠内容撑开），垂直居中可能“看不见效果”，建议加
min-height: 100vh或固定高 - 该属性对多子元素统一生效，不适用于只想居中其中某一个的场景
justify-content 和 align-content 的区别在哪？
这两个属性都用于 Grid 容器，但控制维度不同：justify-content 控制**主轴方向**（默认是行方向，即水平）的对齐；align-content 控制**多行轨道之间**的分布（即网格线整体在容器内的位置），不是单个元素的垂直居中。
容易混淆的是：想让单个元素垂直居中，错用 align-content: center 是无效的——它只在网格有多个显式行（如 grid-template-rows: repeat(3, 1fr)）且容器有剩余空间时才起作用。
立即学习“前端免费学习笔记（深入）”；
- 单行网格（默认）下，
align-content完全不生效 - 真正控制单个元素垂直位置的是
align-items（对齐单元格内内容）或align-self（单独覆盖某个子项） -
justify-content: center在单列网格里也能水平居中，但更推荐用place-items保持语义统一
Grid 居中 vs Flex 居中：什么情况下必须选 Grid？
当需要二维布局能力时，Grid 不只是“能居中”，而是让居中成为副产品。比如：让一个按钮在页面正中，同时确保它下方始终留出 2rem 间距；或者在一个三栏布局里，把中间栏内容精确居中，而两侧栏保持固定宽度——Flex 做不到这种“轨道级”控制。
Grid 还天然支持响应式轨道定义（如 grid-template-columns: minmax(300px, 1fr)) auto minmax(300px, 1fr)），居中逻辑不会因屏幕缩放断裂；Flex 的 justify-content 在换行后行为会变，Grid 则稳定。
- 需要精确控制行/列尺寸比例（比如 2:1:2）、留白或固定轨道时，Grid 是唯一合理选择
- 父容器本身已是 Grid（如 CSS-in-JS 中的 layout 组件），再嵌套 Flex 可能破坏层级语义
- 要实现“内容溢出时仍保持居中”（如动态加载文本），Grid 的
place-items比 Flex 的align-items更少受内部尺寸计算影响
IE11 兼容 Grid 居中吗？替代方案怎么写？
IE11 支持部分 Grid 语法，但 place-items、place-content 和 gap 都不支持。强行使用会导致整个 Grid 回退为普通块流，居中失效。
若必须兼容 IE11，可降级为 display: -ms-grid + 手动定位，但代价高；更现实的做法是用现代语法写 Grid 居中，再通过 @supports 为旧浏览器提供 Flex 回退：
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
@supports (display: grid) {
body {
display: grid;
place-items: center;
}
}
- 不要依赖 Autoprefixer 自动补全
-ms-前缀，IE11 的 Grid 实现与标准差异大，手动调试成本极高 - 如果项目已用 Babel 转译 JS，CSS 方面也应避免“写了就以为能跑”的侥幸心理，务必在真机或 BrowserStack 上验证
- 多数 2026 年仍在维护的 IE11 项目，实际已用 Polyfill（如
css-grid-polyfill），但性能差、不支持place-items，只能靠 JS 计算偏移
overflow: hidden 截断、或被 transform 影响坐标系，place-items: center 依然执行，结果却偏离预期。动手前先检查父容器的盒模型状态，比反复调参数更省时间。 
