Flexbox居中必须设父容器高度（如height: 100vh或min-height: 100vh），否则align-items: center因交叉轴无剩余空间而视觉失效；根本原因是父容器未显式设高，导致其高度由内容撑开，而非视口。
Flexbox居中必须设height: 100vh，否则不生效
父容器没高度时，justify-content: center 和 align-items: center 看起来“没反应”，其实是子元素把父容器撑高了，导致视觉上没居中。这不是bug，是flex的正常行为。
常见错误场景：
- 父容器用
height: auto或没写高度 - 父容器是
inline-flex（高度计算逻辑不同，容易误判） - 子元素用了
position: absolute（脱离文档流，flex完全不管它）
实操建议：
- 优先用
height: 100vh，简单直接；若需适配内容高度，可改用min-height: 100vh - 避免在 flex 容器里给子元素加
margin: auto，会和justify-content冲突 - IE11 需加
-ms-flex-pack: center和-ms-flex-align: center前缀
Grid用place-items: center最简，但只作用于直接子元素
place-items: center 是一行代码搞定水平+垂直居中的现代写法，但它只影响 grid container 的**直接子项**——嵌套两层后就失效了，这点常被忽略。
兼容性注意：
- Chrome 85+、Firefox 52+、Safari 14.1+ 支持良好
- IE 完全不支持，Edge 16+ 开始支持
- 如果父容器已定义
grid-template-areas或显式行列，place-items仍生效，但可能被子元素的justify-self或align-self覆盖
别和 place-content 混：后者控制的是整个 grid track（行/列轨道）的对齐，不是 item。
Flex与Grid选哪个？看目标环境和嵌套深度
如果项目要兼容 IE11，选 Flexbox 更稳妥；如果只跑现代浏览器，Grid 的 place-items 更干净、语义更明确。
实际踩坑点：
- Grid 在多层嵌套中容易误以为“全局居中”，结果发现只有最外层生效
- Flexbox 的
margin: auto写法（.container { display: flex; } .child { margin: auto; }）虽简洁，但在 Safari 旧版本中有渲染异常 - 两者都依赖父容器有明确高度，这点完全一致，不存在“Grid 不需要 height”的误解
绝对定位+transform仍是动态尺寸下的兜底方案
当子元素宽高未知、又不能改父容器为 flex/grid 时，top: 50%; left: 50%; transform: translate(-50%, -50%) 依然可靠。
关键限制：
- 父容器必须设
position: relative（或其它非static值） - IE9+ 支持，但旧版需加
-ms-transform - 不要和
margin: auto混用——绝对定位下margin: auto垂直方向无效
真正难处理的，是那些既要响应式、又要兼容老浏览器、还要嵌套深的场景——这时候得组合用，比如外层 grid + 内层 flex，而不是死守“一种写法打天下”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
