place-items: center生效需同时满足：父容器设display: grid/inline-grid、子元素为网格项且未脱离文档流、父容器有明确高度（如min-height: 100vh）。
place-items: center 是最简写法，但必须满足两个前提
直接写 place-items: center 不生效，不是语法错，而是漏了关键条件。它只在 Grid 格式化上下文里起作用，也就是说父容器必须显式触发 Grid 布局——不能靠继承或默认值。
- 父元素必须设置
display: grid或display: inline-grid（grid-cols-1等 Tailwind 类也等效） - 子元素不能脱离文档流：
position: absolute、float会让它失效，因为 Grid 对齐只管网格项（grid items） - 如果父容器高度是
auto且没内容撑开，place-items可能“居中到看不见的地方”——得确保父容器有明确高度（比如min-height: 100vh或固定height）
为什么 place-items: center 比 flex justify-content + align-items 更“强硬”？
Flex 的 justify-content 和 align-items 依赖主轴/交叉轴尺寸计算，当父容器高度未定义（比如 height: auto），垂直居中常失败；Grid 的 place-items 则强制把子项塞进第一个网格单元格的正中心，只要单元格有空间，就一定居中。
- 典型场景：模态框内容区、加载动画容器，内部文字行数或图片尺寸动态变化时，Grid 居中更稳
- 注意：
place-items: center等价于同时设置justify-items: center和align-items: center，它对齐的是“每个网格单元格内的内容”，不是整个容器 - 如果父容器被定义为多行多列（如
grid-template-columns: repeat(3, 1fr)），place-items仍只影响单个子元素在各自格子内的位置，不是整体居中
兼容性 fallback 怎么写？IE10+ 也能用 Grid 居中
IE 不支持 place-items，但支持基础 Grid 属性。不用退回到 Flex 或绝对定位，只需拆开写：
- 用
display: -ms-grid触发 IE10/11 的旧版 Grid（需加-ms-前缀） - 替代写法：
justify-items: center; align-items: center—— 这两个属性 IE10+ 均支持 - 若子元素是唯一一个，还可配合
margin: auto（Grid 中margin: auto在二维方向都有效，IE10+ 支持）
示例：.parent { display: grid; justify-items: center; align-items: center; }
立即学习“前端免费学习笔记（深入）”；
常见错误：加了 place-items-center 却没动，先查 computed styles
Tailwind 用户最容易踩的坑：写了 place-items-center，但元素纹丝不动。打开开发者工具看 computed styles，90% 是因为 display 还是 block。
- 确认父元素 class 是否真的包含
grid或grid-cols-1等触发 Grid 的类（Tailwind 默认不启用 Grid，需确保配置中启用了grid插件） - 检查子元素是否意外加了
position: absolute—— 它会脱离 Grid 流，place-items对它完全无效 - 如果子元素是图片，确认没加
display: block以外的 display 值干扰布局（比如inline会受 text-align 影响，和 Grid 冲突）
真正麻烦的不是写法，而是判断当前布局上下文是否被其他 CSS 静默覆盖——比如某个重置样式表把 display 强制设回 block，或者父容器被 display: contents 吃掉了。
