place-items-center没反应最常见原因是父容器未设为Grid容器（缺display: grid），且需有明确高度；它控制子项在单元格内居中，place-content-center才控制整个网格轨道居中。
place-items-center 为什么加了没反应
最常见原因是父容器没触发 Grid 格式化上下文。place-items-center 是 CSS Grid 的简写属性，只对 display: grid 容器生效——它不是通用类，不能直接用在 div 上就起作用。
必须显式添加 grid 或 grid-cols-1 等类来启用 Grid 布局；否则浏览器 computed styles 里 display 仍是 block，place-items-center 完全被忽略。
另一个隐蔽点：父容器需有明确高度（如 h-64、min-h-screen），否则 Grid 容器高度塌陷，视觉上“没居中”，其实是子元素在 0 高度网格里对齐了。
place-items-center 和 place-content-center 到底该用哪个
两者都写在父容器上，但作用对象完全不同：
立即学习“前端免费学习笔记（深入）”；
-
place-items-center控制每个直接子元素在各自网格单元格内的对齐方式，适合单个子项或多个子项各自居中 -
place-content-center控制整个网格轨道区域（rows + columns）在父容器中的位置，只在你定义了多行多列（如grid-cols-3 grid-rows-2）且希望整块网格居中时才需要
多数人想要的是前者。比如一个卡片容器里只有一个按钮，用 grid place-items-center h-48 就够了；若误用 place-content-center，而没配 grid-cols-1 grid-rows-1，它可能只调节轨道间距，根本不动内容。
嵌套一层 div 后居中失效怎么办
当结构变成 <div class="grid place-items-center"><div><div>内容</div></div></div> 时，place-items-center 只作用于第一层 <div>（即中间包装层），而不管它里面的内容——这是 Grid 规范决定的，不是 Tailwind 的 bug。
解决方法是绕过“子项层级”，改用轨道级控制：
- 给父容器加
grid grid-cols-1 grid-rows-1 place-content-center -
grid-cols-1 grid-rows-1强制只有一格，让place-content-center表现为“把内容整体居中” - 不需要改子元素结构，也不依赖子元素是否为直接子项
这个组合比加 flex 多一层 wrapper 更轻量，但语义稍弱，属于实用优先的临时修复手段。
响应式和兼容性要注意什么
place-items 系列类（包括 place-items-center）在 IE 中完全不支持，且无法通过 Autoprefixer 补全。如果项目需兼容 IE11，不要单独依赖它做关键布局。
响应式方面，Tailwind 默认只生成 responsive 变体（如 md:place-items-center），但不会自动提供 hover 或 focus 版本——如果你需要悬停时切换对齐方式，得手动在 tailwind.config.js 中开启：
module.exports = {
variants: {
extend: {
placeItems: ['hover', 'focus']
}
}
}
另外注意：书写模式（writing-mode）会影响 place-items 的行为。比如设了 vertical-rl，start 和 end 对应的方向会旋转，center 不受影响，但实际对齐基准已变——这种边界情况容易被忽略。
