place-items: center生效需容器有明确宽高和display: grid；必须设min-height或height（如100vh），显式定义grid-template-rows: 1fr更稳妥，避免祖先高度缺失、float/absolute干扰及ie11兼容问题。
Grid 的 place-items: center 怎么写才生效
直接写 display: grid; place-items: center; 不一定居中，关键在容器高度和轨道定义是否到位。
- 父容器必须有明确高度，比如
min-height: 100vh或height: 400px；只写height: 100%通常无效，因为祖先元素可能没设高 - 显式声明
grid-template-rows: 1fr更稳妥——有些旧版 Firefox 或嵌套 Grid 场景下，不写这行会导致垂直方向无轨道可分配 - 避免和
float、position: absolute混用；Grid 容器内的绝对定位子元素不受place-items影响 - IE11 不支持
place-items，需回退为justify-items: center; align-items: center;
为什么 place-items: center 对多个子元素也生效
它作用于所有直接子元素，每个子元素都在自己的网格单元里独立居中，不是“整体居中”。这意味着：
- 两个按钮并排放在 Grid 容器里，会各自居中，但彼此水平排列（类似 Flex 的
justify-content: center+align-items: center效果） - 如果想让它们横向居中排列、再整体垂直居中，更适合用 Flex；Grid 的
place-items更适合单个主内容（如登录框、图标卡片） - 子元素若设了
grid-column: span 2等跨列行为，仍会按自身占据的单元格范围居中，不是按整个容器宽高
place-items 和 align-items 混用会怎样
在 Grid 容器里，place-items 是 justify-items 和 align-items 的简写，两者不能共存——后声明的会覆盖前一个。
- 写了
place-items: center再写align-items: flex-start，后者无效 - 如果需要不同轴向不同对齐（比如水平居中、垂直靠上），就别用
place-items，改用justify-items: center; align-items: start; - 注意：Grid 的
align-items控制的是**所有直接子元素在行轨道内的对齐**，不是 Flex 那种交叉轴概念，语义不同但效果相似
兼容性兜底怎么写
项目要支持 Chrome 57+/Firefox 52+/Safari 10.1+，place-items: center 可直接用；但若需兼容 IE11 或某些 WebView，得加前缀和 fallback。
- IE11 需要：
display: -ms-grid; -ms-grid-row-align: center; -ms-grid-column-align: center; - 现代浏览器 fallback 方案：先写 Grid，再用
@supports not (place-items: center)块降级到 Flex - 别依赖
margin: auto在 Grid 里居中——它对place-items无效，还可能干扰渲染
<div></div>，只要容器有 min-height 和 grid-template-rows: 1fr，它就稳稳悬在中间。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
