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 会失效——它把所有子项当一个整体框来居中，而每个子项的尺寸不同，视觉中心就错开了。

正确做法是让所有要重叠的元素共享同一网格单元：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 给父容器加 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 时轻微漂移。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！