百分比高度失效的根本原因是父容器高度不可计算，需确保从html到目标元素的每层祖先都显式设置height（如html、body设height:100%），否则height:50%等会解析为0px，导致flex、grid、absolute等居中方案全部失效。
百分比高度本身不是问题，问题出在「父容器高度不可计算」——height: 50% 或 min-height: 80% 若没有上层明确的高度锚点，最终会算成 0px，导致所有依赖高度的居中方案（flex、grid、absolute）全部失效。
父容器百分比高度没生效，先查三层祖先
浏览器对 height: 50% 的计算是向上递归的：它需要每个父级（直到 html）都提供可计算的高度。只要中间任一环是 height: auto 且没内容撑开，整个链就断了。
-
html和body必须显式设height: 100%（不能只写min-height） - 中间任意一层容器（比如
.wrapper）若只写了width: 100%; padding: 20px，但没设height或min-height，它实际高度就是0 - 如果用了
position: absolute或float脱离文档流，该元素不会撑高父容器——哪怕你写了height: 50%，父容器依然塌陷
flex + align-items 在百分比高度下仍不居中？检查交叉轴长度
align-items: center 不是“自动找中点”，而是把子元素放在「交叉轴可用空间的正中」。如果父容器交叉轴（默认 Y 轴）长度为 0，那它的「中点」就是 0px，子元素自然贴顶。
- 用浏览器开发者工具看 computed styles，确认父容器的
height真实值是否 > 0 - 临时加
border: 1px solid red到父容器，肉眼验证它有没有“占位” - 避免混用
margin: auto—— Safari 下它会覆盖align-items行为，导致上下偏移 - 若父容器靠内容撑开（比如里面有文字），但文字还没渲染完或字体未加载，会出现短暂塌陷；可加
min-height: 1em或font-display: swap缓解
absolute + transform 在百分比高度下更危险
top: 50% 的百分比是相对于父容器高度计算的——父容器高度为 0，top: 50% 就是 0px；此时再 transform: translateY(-50%)，等于白加。
- 必须确保父容器有非零高度，否则这个组合和没写一样
- 不要依赖
vh替代百分比——iOS Safari 中地址栏缩放会导致100vh突然变小，页面“跳动”，此时百分比方案反而更稳（只要锚点链完整） - 如果父容器高度由 JS 动态设置（如监听
resize），务必在设置后触发一次offsetHeight强制重排，否则 CSS 居中可能延迟一帧
grid place-items: center 对百分比高度最宽容
place-items: center 在父容器高度为 0 时仍会尝试布局，但效果取决于 grid track 定义。它比 flex 更“愿意假设存在空间”，但不能当救命稻草。
- 仅当父容器已设
display: grid且至少有一条显式轨道（如grid-template-rows: 1fr）时，place-items才有参照 - 若只写
display: grid; place-items: center，而没定义行/列轨道，它会退化为按内容尺寸布局，结果仍是贴顶 - 兼容性注意：
place-items在 IE11 完全无效，回退方案得用justify-items: center; align-items: center，但后者要求父容器是 grid 容器且有 track
真正卡住的从来不是百分比，而是高度计算链里某个被忽略的 height: auto 环节。与其反复换方案，不如打开 DevTools → Elements → Computed，从子元素往上逐层点开 height，找到第一个显示 0px 的节点——那里就是病灶。修复它，所有居中方案立刻恢复。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
