place-items: center 必须配合 display: grid 才可靠生效，单独用于 flex 容器在 iOS Safari 等环境常静默失效；还需确保父容器有明确高度以避免塌陷导致居中偏移。
place-items: center 能把两行 Flex 居中代码缩成一行，但直接套用在移动端常失效——不是语法错，是布局上下文没配对。
place-items: center 在移动端必须搭配 display: grid
很多人写 display: flex + place-items: center，结果没反应。因为 place-items 是 Grid 布局的属性，对 Flex 容器仅部分浏览器支持（Chrome 59+、Firefox 45+ 可用，但 Safari 11+ 在 Flex 下行为不一致），且不等价于 align-items + justify-content。
- ✅ 正确写法：
display: grid必须前置，place-items: center才生效 - ⚠️ 错误写法：
display: flex+place-items: center→ iOS Safari 里大概率静默失败 - ? 实际效果：它控制的是“每个网格项在其网格区域内的对齐”，不是整个容器的居中锚点
移动端常见失效原因：父容器高度塌陷 + 视口动态变化
即使写了 display: grid 和 place-items: center，如果父容器没明确高度，子元素仍会贴顶。移动端尤其敏感，因为：
- Safari 地址栏收起/展开时重算
100vh，导致容器高度跳变 - 小屏下字体渲染偏移让视觉中心和计算中心轻微错位（尤其
- 父级若用
height: auto或未被内容撑开，网格轨道实际高度为 0
解决办法很简单：加 min-height: 80px 或 min-height: 100vh（别用 height: 100vh）。
立即学习“前端免费学习笔记（深入）”；
place-items 和 place-content 别混用
这两个属性看着像，作用完全不同：
-
place-items: center→ 每个子元素在自己的网格单元格里居中（比如卡片里的图标） -
place-content: center→ 所有网格轨道（含空行空列）整体在容器内居中（比如 2×2 网格只填了 1 个子项，整个网格块会居中） - 移动端单个居中需求，90% 场景只需
place-items: center；只有网格不满且需整体居中时才加place-content
真正省代码的前提，是先确认布局模型和高度约束都到位。少写一行 CSS 很容易，但漏掉 min-height 或错用 display 类型，反而要花十分钟调试。
