grid容器需设明确高度（如min-height:100vh）才能使align-items生效；align-items控制垂直居中，水平居中需justify-content；单元素居中用二者组合，多元素同理；grid适合二维布局扩展，flex更轻量但层级敏感。
grid容器必须有明确高度才能让align-items生效
很多人写完 display: grid 和 align-items: center 发现元素没居中，根本原因是父容器没设置高度。CSS Grid 的 align-items 是沿行轴（block axis）对齐，它依赖容器的可用块方向空间——如果容器高度由内容撑开（即 height: auto），那“居中”就失去参照基准。
- 给 grid 容器设
height: 100vh、min-height: 100vh或具体像素值 - 若用在全屏布局中，推荐
min-height: 100vh，避免内容超长时被截断 - 不要只靠
align-items，还需配合justify-items: center（或justify-content）实现水平居中
align-items vs justify-content：别混用错方向
align-items 控制的是**所有网格项在行轴（垂直方向）上的对齐方式**，而水平居中得看列轴——这时该用 justify-content（作用于整个网格轨道）或 justify-items（作用于单个网格项）。
- 单个子元素居中：用
align-items: center+justify-content: center - 多个子元素都垂直居中、水平居中：同样用
align-items+justify-content，它们会统一作用于所有项 - 若设置了
grid-template-rows或grid-template-columns，align-items仍有效，但justify-content只在轨道总宽小于容器时才触发对齐
div.container {
display: grid;
min-height: 100vh;
align-items: center;
justify-content: center;
}
flex 也能居中，为什么选 grid？
单纯居中一个元素，display: flex 确实更轻量。但 grid 的优势在于：它天然支持二维布局，且居中逻辑不依赖子元素是否为直接子节点（flex 对嵌套层级敏感）。当你后续要扩展成多行多列、响应式栅格、或需要 grid-area 精确控制位置时，一开始就用 grid 能避免重构。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 如果只是单个卡片/登录框居中，flex 更简单；但只要涉及“网格语义”（比如 3×2 卡片列表+中间主区域突出），grid 是更自然的选择
- 注意 Safari 旧版本（justify-content: center 在 grid 中的支持有 bug，可加
place-items: center作为兼容写法 -
place-items: center是align-items和justify-items的简写，不是justify-content的别名，别误用
常见失效场景：子元素用了 margin: auto
有人会给 grid 子项加 margin: auto 试图居中，这在 grid 中虽能工作，但属于“副作用”，且行为不稳定——尤其当子项设置了 grid-column 或 grid-row 后，margin: auto 可能被忽略或引发意外间隙。
立即学习“前端免费学习笔记（深入）”；
- 优先用容器级对齐（
align-items/justify-content），语义清晰、可控性强 - 只有在需要单个子项偏离默认轨道时，才考虑
margin配合place-self - 调试时检查 computed styles，确认
align-items是否被父级或继承值覆盖
