place-content: center 失效主因是父容器未设 display: grid，或内容区域撑满父容器；单子项居中应改用 justify-items/align-items 或 justify-self/align-self。
place-content 居中失效的常见原因
直接写 place-content: center 却没效果？大概率是父容器没设成 Grid 容器，或者子项数量、尺寸触发了默认对齐逻辑。Grid 的 place-content 只控制**整个内容区域**（即所有行和列组成的整体）在父容器里的对齐，不是让单个子项居中——它只在有多行多列、且内容区域小于父容器时才“看得见”效果。
- 父元素必须显式声明
display: grid，仅靠place-content不会自动激活 Grid - 如果只有一行一列，内容区域撑满父容器，
place-content就无处可“居中” - 子项本身设置了
width/height或min-width/min-height，可能挤压内容区域，导致行为不符合预期 - 注意：Firefox 旧版本对
place-content支持不全，若需兼容 IE 或早期 Firefox，得换方案
真正让单个子项在 Grid 父容器里居中该用什么
想让一个 div 在 Grid 父容器里水平垂直居中，place-content 不是首选。应该用 justify-items + align-items（作用于所有子项），或更精准地用子项自身的 justify-self 和 align-self。
-
justify-items: center+align-items: center：适用于所有子项统一居中 - 只居中某一个子项：给它加
justify-self: center和align-self: center - 父容器无需定义行列模板（
grid-template-rows/columns），默认单格也能生效 - 如果父容器已设了
grid-template-areas，子项的place-self仍有效，但优先级低于区域定位
示例：
parent { display: grid; justify-items: center; align-items: center; }<br>child { width: 100px; height: 100px; }
place-content 和 place-items、place-self 的关系容易搞混
三个 place- 属性名字像，但作用对象完全不同：place-content 是父容器属性，管“内容块整体”；place-items 是父容器属性，管“每个子项在单元格内的对齐”；place-self 是子项属性，覆盖 place-items。
-
place-content: center≡justify-content: center+align-content: center -
place-items: center≡justify-items: center+align-items: center -
place-self: center≡justify-self: center+align-self: center - 它们之间没有继承关系，也不会互相覆盖——用错地方就完全没反应
替代方案：当 Grid 不适用时怎么居中
如果父容器不能改 display（比如受限于第三方组件、CSS-in-JS 注入规则），或需要兼容老浏览器，place-content 就不可用。此时更稳妥的是 Flexbox：
- 父容器加
display: flex+justify-content: center+align-items: center - 若子项是绝对定位，可用
top: 50%+left: 50%+transform: translate(-50%, -50%) - 避免用
margin: auto居中块级元素——它只在 block 元素有明确宽高且 display 为 block/inline-block 时才生效，Grid/Flex 子项里行为不一致
复杂点在于：Grid 的 place- 系列属性一旦和其他布局上下文（比如嵌套 Flex 或 position: absolute）混用，对齐逻辑会迅速变得不可预测。这时候不如先确认“到底谁该负责居中”，再选一层最外的、可控的容器来统一处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
