Grid的place-items: center更简洁直接，Flexbox需justify-content和align-items且依赖父容器高度；Grid不关心主轴方向，Flexbox是一维布局。
Flexbox 和 Grid 都能实现完全居中（水平 + 垂直），但 Grid 的 place-items: center 更简洁、语义更直接；Flexbox 则需同时设 justify-content 和 align-items，且对父容器高度有隐性依赖。
Flexbox 实现完全居中：必须注意父容器高度
Flexbox 是一维布局模型，align-items: center 依赖父容器在交叉轴（垂直方向）上有明确尺寸。如果父容器没设 height 或 min-height，垂直居中会失效——子元素只是“按内容撑开”，看起来没动。
- 父容器必须有可计算的高度（比如
height: 100vh、min-height: 100vh，或继承自已设高的祖先） - 子元素无需设宽高，但若为
display: block且无宽高，仍会正常居中 - 避免给子元素设
margin: auto—— 在 Flex 容器里它不控制居中，可能干扰对齐 - 示例：
.parent { display: flex; justify-content: center; align-items: center; height: 100vh; /* 关键！ */ } .child { width: 200px; height: 100px; background: #4a90e2; }
Grid 实现完全居中：一行代码搞定，但注意浏览器兼容性
place-items: center 是 Grid 的简写属性，等价于 align-items: center; justify-items: center;，它让所有直接子项在二维空间里同时居中。相比 Flexbox，它不关心主轴方向，也不依赖父容器是否“有高度”——只要父容器是 display: grid，且子项不是 position: absolute，就能生效。
- 父容器无需显式设
height，但若内容为空且无高度约束，视觉上仍看不到效果（本质是容器自身塌陷） - 旧版 Safari（≤15.4）不支持
place-items，需回退到align-items: center; justify-content: center;（注意：这里是justify-content，不是justify-items） - Grid 居中对多子项也有效，而 Flexbox 的
justify-content+align-items默认只影响直接子项的集体对齐 - 示例：
.parent { display: grid; place-items: center; min-height: 100vh; } .child { background: #4a90e2; }
为什么有时居中“看起来没生效”？常见三类坑
不是代码写错，而是被其他样式或结构掩盖了：
-
overflow: hidden在父容器上：如果子元素超出父容器（比如设置了transform: scale(1.2)），可能被裁剪，误以为没居中 - 父容器用了
position: relative但子元素用了position: absolute：此时 Flex/Grid 失效，子元素脱离文档流，需手动用top/left+transform - 子元素有
margin或padding影响视觉中心：居中逻辑基于盒模型边界，不是内容视觉中心；可用box-sizing: border-box统一计算基准
该选 Flexbox 还是 Grid？看实际场景
两者都能居中，但设计意图不同：
- 如果只是居中一个登录框、弹窗、卡片，且父容器本身没有复杂网格结构 → 优先用 Grid 的
place-items: center，代码少、意图清、不易出错 - 如果父容器还要做行内项目分布（比如按钮组、导航栏）、或需响应式换行（
flex-wrap）→ 用 Flexbox，居中只是它能力的一部分 - 需要兼容 IE11？两者都不行，得退回
position: absolute+transform: translate(-50%, -50%)方案
真正容易被忽略的，是父容器的尺寸来源——无论 Flex 还是 Grid，居中都发生在“有界空间”里。没高度，就没有垂直参照；没宽度，就谈不上水平参照。别只盯着居中属性，先确认容器有没有“存在感”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
