place-items: center 生效需三个前提：父容器设 display: grid、子元素不脱离文档流、父容器有明确高度（如 min-height: 100vh）。
place-items: center 能快速实现，但直接写它大概率不生效——漏了三个硬性前提：父容器必须是 display: grid、子元素不能脱离文档流、父容器得有明确高度（比如 min-height: 100vh）。
为什么 place-items: center 看似写了却没反应？
这不是语法错误，而是 Grid 对齐机制没被触发。它只在 Grid 格式化上下文里起作用，且只对“网格项”生效。
- 父容器没设
display: grid或display: inline-grid（Tailwind 的grid类或grid-cols-1等也等效） - 子元素用了
position: absolute或float，导致它不再是网格项 - 父容器高度为
auto且无内容撑开，Grid 容器实际高度为 0，居中后子元素“在看不见的地方”
怎么写才真正生效？
最稳妥的最小代码块是：
.container {
display: grid;
place-items: center;
min-height: 100vh;
}
这个组合覆盖了所有前提条件。如果要用在响应式布局中，min-height 比 height 更安全，避免内容溢出时被截断。
- 想兼容 IE10+？拆开写：
justify-items: center和align-items: center（IE 支持这两个属性） - 只居中某一个子元素？别用
place-items，改用place-self: center写在该子元素上 - 父容器已有
grid-template-columns或多行定义？place-items仍只影响每个单元格内的对齐，不是整体位移
justify-content 和 align-content 别乱套用
这两个属性控制的是“整个网格轨道块”的位置，不是子元素内容。只有当网格总尺寸小于容器（比如 grid-template-columns: 100px 100px 在 width: 500px 容器里），justify-content: center; align-content: center 才会让那块 200px 宽的网格整体居中。
- 单个子元素居中？不用它，用
place-items或margin: auto（Grid 中margin: auto在二维方向都有效） - 误用会导致：子元素明明写了
center却纹丝不动，因为 Grid 轨道本身没留空隙 - 调试时看 computed styles，重点确认
display是grid，且height/min-height不为 0
最容易被忽略的是高度——哪怕你把所有 Grid 属性都写对了，父容器没撑开，place-items 就只是在 0 高度空间里做了一个完美的中心计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
