place-items: center可一键实现子元素水平垂直居中，等价于justify-items和align-items同时设为center；注意它作用于子元素对齐盒，非轨道对齐，且需父容器声明display: grid。
Grid容器里用place-items一键居中
只要父容器是display: grid，place-items: center就能同时搞定子元素的水平和垂直居中——它等价于同时设justify-items: center和align-items: center，对单个子项或多个子项都生效。
常见错误是只写place-content：它控制的是整个grid轨道（rows/columns）在容器内的对齐，不是子元素本身；而place-items才真正作用于子元素的对齐盒。
- 必须确保父容器显式声明
display: grid（或inline-grid），否则place-items无效 - 子元素不能有
align-self或justify-self覆盖，否则会优先生效 - 如果子元素是
flex容器或设置了固定宽高，不影响居中逻辑，但要注意内容溢出时的表现
单个子元素用justify-content + align-content不顶用
很多人试过给Grid容器加justify-content: center和align-content: center，发现没反应——这是因为这两个属性只在有多行/多列轨道且容器有剩余空间时才起作用。单个子元素默认只占一个网格单元（grid cell），没有“轨道堆叠”，align-content完全不触发。
典型场景：你只放了一个<div>进Grid容器，又没设grid-template-rows或grid-template-columns，此时容器实际只有1行1列，align-content直接失效。
立即学习“前端免费学习笔记（深入）”；
- 想靠
justify-content/align-content居中？先得让Grid产生多行或多列，比如加grid-template-rows: repeat(3, 1fr) - 更稳妥的做法永远是
place-items: center，不依赖轨道数量 - 注意
align-content在grid-auto-rows动态生成轨道时也可能不生效，兼容性不如place-items
IE11不支持place-items，降级方案怎么写
IE11完全不识别place-items，连带justify-items和align-items也无效。这时候只能退回justify-content + align-content组合，但前提是强制创建至少2×2的网格轨道。
实操上最简降级写法是：display: -ms-grid; -ms-grid-rows: 1fr; -ms-grid-columns: 1fr;配合-ms-grid-row-align: center; -ms-grid-column-align: center;。不过这个语法只适用于单子项，且不能混用现代Grid属性。
- 别试图在同一个选择器里写
place-items再叠-ms-grid-row-align——IE11会忽略整条规则 - 用
@supports (place-items: center)做特性检测比用户代理判断更可靠 - 如果项目必须支持IE11，建议统一用Flexbox居中方案，Grid降级成本远高于Flex
Grid居中后子元素文字换行错位怎么办
当子元素是块级元素（比如<p>）且内容超长时，place-items: center会让整个块居中，但块内文字默认左对齐，视觉上像“偏了”。这不是居中失效，而是文本对齐未同步调整。
本质是居中作用于块框（block box），而文字对齐是行框（inline box）行为，两者独立。解决只需额外加一行text-align: center。
- 如果子元素用了
display: inline-block，还要确认父容器没有text-align: justify之类干扰 - Flex容器里类似问题常被
align-items掩盖，但Grid里更暴露，因为居中逻辑更“干净” - 不要给子元素加
margin: auto试图二次居中——Grid里它只在行内方向生效，且可能破坏place-items计算
