place-items: center 实现居中需父容器设 display: grid，它等价于 justify-items: center 和 align-items: center，仅对直接子元素生效；漏写 display: grid 或误用 place-content 是常见失效原因。
Grid布局中用place-items: center最简居中
只要父容器设了display: grid，一行place-items: center就能同时搞定水平+垂直居中，等价于justify-items: center + align-items: center。它对所有直接子元素生效，不依赖子元素尺寸或是否固定宽高。
常见错误是只写place-content: center——它只影响网格轨道之间的空白，不是子元素本身；或者漏掉display: grid，导致样式完全不生效。
- 必须给父容器加
display: grid，否则place-items无效 - 子元素不需要设
width/height，也不用margin: auto - 如果只想居中某一个子项（而非全部），改用
justify-self: center和align-self: center
grid-template-areas配合justify-items精细控制
当用命名区域定义复杂布局（比如header / main / footer）时，place-items会作用于整个网格容器，可能干扰区域对齐逻辑。这时更适合单独控制某个区域内的内容居中。
例如：在main区域里让按钮居中，就该在main的直接子容器上设justify-items: center和align-items: center，而不是在根网格容器上一刀切。
-
justify-items控制所有网格项的水平对齐，align-items控制垂直对齐 - 它们只对直接子元素（即网格项）起作用，嵌套子元素需另设
- 若网格项本身是
display: flex容器，内部再居中要用justify-content/align-items
为什么margin: auto在Grid里有时失效
在Grid中，margin: auto确实能居中单个网格项，但前提是该网格项没被显式分配到某一行/列轨道中——也就是没用grid-column或grid-row定位。一旦用了这些属性，margin: auto就只在对应轨道内起作用，且仅限于该维度（水平或垂直）。
- 没设
grid-column/grid-row时：margin: auto可同时撑满并居中 - 设了
grid-column: 2 / 3后：margin: auto只在第2列轨道内水平居中，不影响行方向 - 想跨轨道居中？老实用
place-items或justify-self/align-self
兼容性与降级处理要点
place-items在Chrome 68+/Firefox 63+/Safari 12.1+支持良好，但IE完全不支持。如果项目仍需兼容IE11，不能只靠Grid居中，得回退到Flexbox或绝对定位方案。
- 别指望
place-items在IE中降级为text-align: center——它压根不解析 - 可用
@supports (display: grid)做特性检测，包裹Grid居中代码 - 移动端iOS Safari 10.3–12.0有
place-itemsbug，建议用justify-items+align-items显式写两行
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
