父容器高度塌陷时flex居中必然失效，因其交叉轴无可用尺寸，align-items失去计算依据；需先修复父容器高度（如设height/min-height）、清除浮动或用absolute定位绕过。
父容器高度塌陷时，flex 居中必然失效
写了 display: flex 和 align-items: center 却不居中？大概率是父容器高度为 0——它自己都“看不见”，子元素再怎么对齐也没视觉效果。塌陷后父容器没有可测量的交叉轴长度，align-items 就失去计算依据。
实操建议：
- 先确认父容器是否真的塌了：打开开发者工具，看它的
height是不是0或远小于预期 - 别急着调子元素样式，先解决父容器自身高度问题
- 如果子元素本身浮动（
float: left等），必须先清除或触发 BFC，否则父容器连“撑高”的机会都没有
用 position: absolute 绕过塌陷，但必须设定位上下文
这个方案不依赖父容器高度，天然适配塌陷场景，但容易漏掉关键约束：父容器没设 position: relative，子元素就会相对于 viewport 定位，一滚动就跑偏。
正确写法：
.parent {
position: relative; /* 必须加！否则 top/left 失效 */
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
注意点：
-
transform: translate(-50%, -50%)不能拆成两个独立声明，漏写一个就只水平或只垂直居中 - 子元素若宽高不固定（比如图片未加载完），会出现短暂上跳——可提前设
min-height或用aspect-ratio锁定比例 - 该方案在 IE9+ 全兼容，比
flex更老浏览器友好
用 grid + place-items 前提仍是父容器有尺寸
display: grid; place-items: center 看似简洁，但它和 flex 一样，需要父容器在交叉轴（这里是高度）上有可测量值。塌陷时父容器高度为 0，place-items 同样无从下手。
所以实际使用时：
- 要么先用
overflow: hidden/display: flow-root触发 BFC 撑开父容器，再加grid - 要么直接放弃
grid居中，改用absolute方案——它不关心父容器有没有高度 - IE11 不支持
place-items，需回退到justify-items: center; align-items: center，但依然要解决塌陷问题
真正绕不开的底层问题：所有居中都依赖“可测量的交叉轴”
无论是 flex、grid 还是 absolute，只要父容器没高度（或没定位上下文），居中逻辑就失去锚点。很多人反复调试子元素样式，却忘了检查父容器是否被浮动掏空、是否被 margin 折叠顶上去、是否被默认文档流压缩成一条线。
最容易被忽略的是：margin-top 穿透导致父容器“被顶高”却没内容撑开——这时父容器看似有高度，实则只是被子元素的外边距推上去的，flex 仍会失效。遇到这种情况，优先给父容器加 padding-top: 1px 或 border-top: 1px solid transparent 打断 margin 折叠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
