place-items: center 是最简写法，需父容器设 display: grid 且有明确高度（如 min-height: 100vh），子元素不能脱离文档流，等价于 justify-items: center 和 align-items: center。
grid布局中用place-items:center最简实现
现代项目里，想让一个子元素在父容器内水平垂直同时居中，place-items: center 是最直接的写法。它等价于 justify-items: center + align-items: center，但更简洁，且只作用于子元素（不改变子元素内部布局）。
注意：这个属性必须加在父容器上，且父容器要声明 display: grid；子元素本身不需要任何居中相关样式。
- 父容器没设
height或内容撑不开时，可能“看起来没居中”——因为 Grid 容器高度塌陷，实际是居中了，只是容器太矮 - 如果父容器已有
grid-template-rows或grid-template-columns，place-items仍生效，但仅影响子元素在单元格内的对齐，不是整行/列居中 - 不兼容 IE，Edge 16+、Chrome 57+、Firefox 52+、Safari 10.1+ 均支持
.grid-container {
display: grid;
place-items: center;
width: 300px;
height: 300px;
background: #f0f0f0;
}
.child {
width: 100px;
height: 100px;
background: #3a86ff;
}
当父容器是grid但子元素需单独居中时用justify-self/align-self
如果父容器已是 Grid（比如用了 grid-template-areas 或多列布局），而你只想让其中某一个子元素居中，不要动全局 place-items，改用 justify-self: center 和 align-self: center。
这两个属性作用于单个子元素，优先级高于父容器的 justify-items/align-items，适合混合布局场景。
立即学习“前端免费学习笔记（深入）”；
-
justify-self控制水平方向（start/center/end/stretch） -
align-self控制垂直方向（同上） - 若子元素是
span或文本节点，默认不占满网格单元格，加justify-self才会生效 - 注意：IE 完全不支持
justify-self/align-self，如需兼容得换方案
grid中图片或文字居中容易忽略的尺寸陷阱
Grid 居中本身不处理内容溢出。如果子元素（比如一张大图或长文本）宽高超出父容器，place-items: center 会让它的中心点对齐，但边缘可能被裁剪或撑破布局。
- 图片建议加
max-width: 100%+height: auto防止横向溢出 - 文字若需限制宽度，用
width: fit-content或max-width配合white-space: nowrap（单行）或overflow: hidden（截断） - Grid 容器若设了
overflow: hidden，居中后溢出部分会被隐藏，但视觉上仍是“居中了”，这点和 Flex 不同——Flex 的align-items: center在溢出时仍保持对齐逻辑，而 Grid 更严格按单元格边界算
与flex居中混用时的实际冲突点
别在一个容器上同时设 display: grid 和 display: flex ——后者会覆盖前者。但真实项目中常遇到“父容器是 Grid，某个子元素内部又用 Flex”的嵌套场景。
- 此时子元素的 Flex 居中（如
justify-content）和父 Grid 的place-items互不干扰，可以共存 - 真正容易出问题的是：给子元素同时设
margin: auto和align-self: center，在 Safari 中可能导致垂直方向计算异常，建议二选一 - 如果子元素是
img且未设置宽高，Grid 会按其固有尺寸分配空间，place-items仍居中，但容器可能被拉宽——这时加width: 100%或grid-auto-flow: dense可缓解
