place-items: center可一键实现子元素水平垂直居中等价于justify-items和align-items同时设为center注意它作用于子元素对齐盒非轨道对齐且需父容器声明display: grid。Grid容器里用place-items一键居中只要父容器是display: gridplace-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直接失效。立即学习“前端免费学习笔记深入” MacsMind 电商AI超级智能客服