place-items: center 一行实现子元素二维居中，无需知宽高、不需额外 wrapper 或 transform；仅需父容器 display: grid 并设 min-height 防塌陷，兼容现代浏览器但不支持 IE。
用 place-items: center 一行搞定
不需要知道子元素宽高，也不需要额外 wrapper 或 transform，Grid 原生支持块级居中。只要父容器设为 display: grid，再加一句 place-items: center，子元素就会在二维平面（水平 + 垂直）完全居中。
这行代码等价于同时设置 justify-items: center 和 align-items: center，适用于所有 Grid 子项（包括单个子元素），且对 inline、block、flex、甚至未设置尺寸的 div 都有效。
-
place-items是 Grid 专属属性，只在display: grid或display: inline-grid容器上生效 - 它影响的是「网格项」（grid items）在单元格内的对齐，不是整个网格容器的对齐
- 如果父容器没有明确高度（比如仅靠内容撑开），需确保其有可计算的块级高度（如
min-height: 100vh），否则垂直居中可能视觉失效
为什么不用 margin: auto 或 transform
margin: auto 在 Grid 中对单个子项也有效，但必须配合 justify-self + align-self 或显式定义网格线，实际写起来不止一行；而 transform: translate(-50%, -50%) 要求父容器 position: relative、子元素 position: absolute，还得手动写 top: 50%; left: 50% —— 三行起，且依赖已知渲染尺寸。
真正“一行”的硬性条件是：不新增 DOM、不写 JS、不依赖子元素尺寸或类型。只有 place-items: center 满足这个约束。
- 绝对定位方案在子元素含
width: fit-content或响应式字体时容易偏移 -
margin: auto在 Flex 中能居中，但在 Grid 中需子项是「可伸缩网格项」，且父容器得是grid+ 显式单单元格（如grid-template-areas），并不比place-items更简洁
兼容性与 fallback 注意点
place-items 在 Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+ 均原生支持，基本可放心用于现代项目。但如果你必须支持 IE 或老 Android WebView，它不会生效，且无渐进降级机制 —— Grid 属性整体不被识别，会直接回退到普通流布局。
- 别试图用
@supports (place-items: center)包裹来写 fallback，因为旧浏览器连@supports都不支持或解析不全 - 真要兼容 IE，只能另起一套定位逻辑（比如用
display: table-cell+vertical-align: middle），但这就不是「一行」了 - 注意 Safari 10.0 及更早版本不支持
place-items，虽然后续版本都 OK，但若项目明确要求支持 macOS Sierra 初始版，就得避开
一个真实可用的最小示例
假设你有个弹层容器，里面是个动态生成的卡片，宽高完全不可控：
.modal {
display: grid;
place-items: center;
min-height: 100vh;
margin: 0;
}
<p>.modal > <em> {
/</em> 不需要任何尺寸、定位或 transform */
}</p>
这段 CSS 就是全部。只要 .modal 是视口级容器，里面的任意子元素（不管是一张图片、一段富文本，还是空 div）都会严格居中。唯一要注意的，是 min-height: 100vh —— 如果漏掉，而子内容又很短，容器高度塌陷，就看不到居中效果了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
