place-items: center不生效，八成是父容器未设display: grid或高度为0；必须同时设置display: grid和明确高度（如min-height: 100vh），且区分place-items（对齐网格项）与place-content（对齐网格轨道）。
place-items: center 不生效，八成是父容器没设 display: grid，或者容器本身高度为 0。
必须先写 display: grid
Grid 的所有对齐属性都只在 Grid 格式化上下文中起作用。place-items 不是通用居中魔法，它只对 display: grid 或 display: inline-grid 的容器有效。
- 只加
place-items: center而不加display: grid—— 完全无效 - 写了
display: grid但被其他样式覆盖（比如float: left、position: absolute）—— 会退出 Grid 上下文，place-items失效 - 用
display: contents或visibility: hidden的子元素不会参与对齐，相当于“不存在”
容器得有高度，否则垂直方向没参考基准
place-items: center 的垂直对齐（即 align-items: center 部分）依赖容器在交叉轴上有可测量的空间。如果容器 height 是 auto 且子元素又不撑高，计算高度就是 0px —— 居中自然没反应。
- 全屏场景优先用
min-height: 100vh，比height: 100vh更稳（避免 iOS 键盘弹出时视口收缩） - 嵌套布局中，确保父级有
height或min-height，且没被overflow: hidden或flex: 0 0 auto截断 - 别忘了重置
html, body { height: 100%; margin: 0; }—— 否则100vh在某些浏览器里可能不顶用
别和 place-content 搞混
place-items 对齐的是**网格项（grid items）在各自单元格里的位置**；place-content 对齐的是**整套行/列轨道（grid tracks）在容器内的位置**。两者作用对象完全不同。
- 单个子元素 + 无显式网格划分 →
place-items: center就够了 - 多个子元素排成多行多列，想让整块网格“浮在容器中央” → 得用
place-content: center - 误把
place-content: center当作place-items用，结果发现子元素还是贴左上角 —— 这是最常见的调试卡点
只想居中一个子元素？用 place-self
place-items 是容器级属性，会影响所有直接子项。如果容器里有多个子元素，它们会被一起拉到中心，视觉上就重叠了。
- 精准控制某一个子元素：直接在它身上写
place-self: center - 等价写法是
justify-self: center; align-self: center;，调试时更容易分离问题 - 注意：
place-self只影响该元素在父网格单元中的位置，不影响它内部的 flex/grid 布局 - 如果父容器没定义
grid-template-rows，而子元素又没内容撑高，垂直方向仍可能不生效 —— 此时仍需给父容器加min-height
真正让人反复折腾的，从来不是 place-items: center 写错，而是它背后那两个沉默的前提：容器得是 grid，还得有宽有高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
