place-self: center 是最直接的单个网格子项居中解法，等价于 justify-self: center 和 align-self: center 的简写，仅作用于当前直接子元素，需父容器设 display: grid。
place-self: center 是最直接的解法
想只让某一个网格子项居中，其他保持默认位置，place-self: center 就是专为这个场景设计的。它等价于同时写 justify-self: center 和 align-self: center，但更简洁，且只作用于当前元素。
常见错误现象：写了 place-items: center 却发现所有子项都动了——那是批量控制，不是你要的“单个项”。
- 父容器必须有
display: grid（哪怕没定义行列） - 目标元素要是网格容器的**直接子元素**，不能被
<div> 或 Fragment 包裹一层 <li>如果该元素用了 <code>grid-row或grid-column跨轨道，place-self: center仍有效，但它是在跨出的整个区域（比如两行合并后的高度）内居中，不是整个容器高度 - 不依赖父容器高度是否显式设置，只要网格轨道有尺寸（如
1fr、固定值或内容撑开），对齐就可见 -
align-self: center只管垂直方向，不影响水平；justify-self: center只管水平方向 - 它们会覆盖容器级的
align-items和justify-items，优先级更高 - 若子项本身设置了
margin: auto，在 Grid 中它只在轨道尺寸为auto或fit-content时才生效，不如justify-self/align-self可靠 - 用浏览器开发者工具检查 computed 样式，确认父元素的
display确实是grid - 检查目标元素的
grid-area是否被意外覆盖（比如通过grid-template-areas定义了别名但没匹配上） - 如果父容器高度塌陷（比如没设
height、min-height或内容为空），即使对齐逻辑正确，视觉上也像“没动” - 给父容器加
display: flex+justify-content: center+align-items: center - 用
@supports (place-self: center)做特性检测，现代浏览器走 Grid，老浏览器 fallback 到 Flex - 注意：Flexbox 的
align-items是相对于容器整体高度居中，而 Grid 的align-self是相对于所在轨道，语义不同，降级时需确认行为是否一致
为什么 align-self + justify-self 更可控
place-self 是简写，但拆开写 align-self 和 justify-self 能应对更多实际需求，比如只水平居中、或在不同断点下分别调整。
例如，你希望某个图标在小屏左对齐、大屏居中，用媒体查询改 justify-self 比改 place-self 更清晰。
父容器没设 display: grid 是最大坑点
几乎所有“写了但没效果”的情况，根源都是父元素没声明 display: grid 或 display: inline-grid。CSS 不会因为写了 place-self 就自动切换布局模式。
React/Vue 中尤其容易踩：Fragment、嵌套 <div>、或用 <code>asChild 类组件导致真实 DOM 结构变深，目标元素不再是网格容器的直接子代。
兼容性与降级建议
place-self 在 Safari 10.1+、Chrome 57+、Firefox 45+ 支持良好；Edge 16+ 开始支持；IE 完全不支持。
如果你的项目仍需兼容 IE11，不要试图混用现代 Grid 属性和旧版 -ms-grid 语法——IE 会忽略整条规则。更稳妥的做法是用 Flexbox 降级：
center 都没用。
