place-items: center 是最稳的单层居中方案，需父容器 display: grid、有明确高度且清除 body margin；多层重叠时须配合 grid-area: 1 / 1；不依赖子元素尺寸，兼容性差时宜用 text-align + line-height 等降级。
用 place-items: center 实现单层元素居中最稳
只要父容器是 display: grid，且子元素没设 position: absolute 或其他脱离文档流的样式，place-items: center 就能一步到位完成水平+垂直居中。它等价于同时写 justify-items: center 和 align-items: center，但更简洁，也更少出错。
注意点：
-
place-items作用在容器上，影响所有直系子项目（不是孙子） - 容器必须有明确高度（比如
height: 100vh），否则可能“看不见居中效果” - 务必清掉
body默认margin：body { margin: 0; }，不然100vh会因外边距偏移
多层重叠元素居中必须用 grid-area: 1 / 1
当你要叠好几个 div（比如遮罩层、图标、文字、SVG），又希望它们中心完全对齐，flexbox 会失效——它把所有子项当一个整体框来居中，而每个子项的尺寸不同，视觉中心就错开了。
正确做法是让所有要重叠的元素共享同一网格单元：
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
display: grid; place-items: center; - 给每个子元素加
grid-area: 1 / 1;（即第1行第1列） - 不需要
position: absolute，也不需要手动算transform -
z-index依然有效，按需控制层叠顺序即可
Grid 居中时子元素宽高不确定？别硬设 width/height
很多同学一看到居中不生效，第一反应是“是不是没设宽高”，于是给子元素加 width: 300px; height: 200px;。这反而容易破坏响应式表现，尤其在移动端。
Grid 的优势恰恰在于不依赖子元素尺寸：
- 图片、按钮、SVG、甚至空
div都能居中，无需预知大小 - 如果子元素内容动态变化（比如文字长度浮动），
place-items: center仍保持其中心点对齐容器中心 - 若需限制最大尺寸，用
max-width或aspect-ratio更安全，而不是固定宽高
IE/旧 Edge 不支持 Grid？降级方案别堆 flexbox
IE11 和旧版 Edge（≤15）确实不支持 place-items 或 grid-area。但直接 fallback 到 display: flex 并不可靠——特别是多层重叠场景，flex 会再次失效。
更务实的兼容策略是：
- 只对核心内容做降级：用
text-align: center+line-height居中文本，或margin: 0 auto居中定宽块 - 避免在同一个容器里混用 Grid 和 Flex 做 fallback，容易触发渲染冲突
- 现代项目若已放弃 IE 支持，可放心用 Grid；构建工具（如 PostCSS）一般不自动加 Grid 前缀，这点和 Flex 不同，得手动确认
grid-area: 1 / 1 是唯一不靠 JS 就能稳住中心点的方式，其他方法都会在缩放或 resize 时轻微漂移。 
