place-items 能垂直居中子元素，但仅当父容器设为 display: grid 且作用于直接子项时生效；它等价于 justify-items 和 align-items 同时设为 center，影响网格单元格内内容对齐，而非整个容器。
place-items 能不能直接垂直居中子元素
能，但只在特定条件下生效——它不是万能的“一键居中按钮”，而是对 grid 容器内所有直接子项统一设置对齐方式的快捷语法。它的效果取决于容器是否启用了网格布局，以及子元素是否是网格项（即直系子元素）。
常见错误现象：place-items: center 写了没反应，页面毫无变化。大概率是因为父容器没设 display: grid，或者你试图用它去居中 flex 项、绝对定位元素、或嵌套多层后的孙子节点。
- 必须先声明
display: grid（或display: inline-grid） - 只作用于直接子元素，不穿透层级
- 等价于同时设置
justify-items: center和align-items: center，影响的是“网格单元格”内部的对齐，不是整个容器的主轴/交叉轴
place-items 和 place-content 的区别在哪
这是最容易混淆的一对。简单说：place-items 管“每个格子怎么放内容”，place-content 管“所有格子整体怎么在容器里排布”。
使用场景举例：一个网格容器有 3 行 3 列，但只填了 2 个子元素。此时：
立即学习“前端免费学习笔记（深入）”；
-
place-items: center→ 这两个子元素各自在自己的网格区域里居中（比如左上角那个会待在第一格正中央） -
place-content: center→ 整个 3×3 的网格块（含空行空列）会在父容器里居中，子元素位置不变 - 两者一起用，才可能实现“内容视觉上真正居中”的效果，尤其当网格轨道未铺满容器时
性能影响极小，但误用会导致布局意图完全偏离——比如本想让图标在卡片里居中，结果整张卡片被挤到视口中央。
IE 不支持 place-items，有没有安全的降级方案
IE10/11 完全不识别 place-items，连带不支持 display: grid 的现代语法（仅支持旧版 -ms-grid）。所以不能只靠它做唯一居中逻辑。
实操建议：用渐进增强思路，优先写老式可靠方案，再叠加现代语法。
- 对单个块级子元素，可用
display: flex+justify-content/align-items作为 fallback - 若已用
display: grid，可加一行align-items: center; justify-items: center;（IE 无视，现代浏览器覆盖） - 避免依赖
place-items做关键布局，比如登录框必须居中——这种地方建议用position: absolute+transform: translate(-50%, -50%)或 flex 主流方案兜底
兼容性提示：place-items 在 Chrome 57+、Firefox 45+、Safari 10.1+、Edge 16+ 可用；iOS Safari 需 10.3+。
place-items 在 Grid + Auto-fit 场景下为什么有时失效
典型表现：用 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 布局卡片，加上 place-items: center，但卡片文字没垂直居中，甚至高度塌陷。
根本原因：当列数动态变化时，grid-auto-rows 默认为 auto，导致每行高度由内容撑开，而 place-items 是让内容在“该行高度”内居中——如果某张卡片内容少、高度小，它就在一个很矮的格子里居中，视觉上仍偏上。
- 解决方法是显式设定行高：
grid-auto-rows: 1fr或固定值如grid-auto-rows: 200px - 更稳妥的做法是给子元素自身加
display: flex+flex-direction: column+justify-content: center，把居中控制权交给内容层 - 注意：不要混用
place-items和子元素上的align-self，后者会覆盖前者
这个坑藏得深——布局看起来正常，只有内容高度不一时才暴露，调试时容易忽略 grid 行高的隐式行为。
