绝对定位元素在flex容器中“飘走”，是因为flex容器默认position: static，不构成定位上下文，需显式设position: relative；top: 50%居中失效常因父容器高度为0，应设min-height或留流式子项撑高；top: 50%; left: 50%需配合transform: translate(-50%, -50%)才真正居中。
绝对定位元素在Flex容器里“飘走”，是因为没设 position: relative
它不是 Flex 的 bug，而是 CSS 定位规则的自然结果：position: absolute 元素会去找最近的「已定位祖先」作为包含块（containing block）。如果 Flex 容器本身是 position: static（默认值），那它就不算「已定位」——浏览器就会继续往上找，大概率落到 上。你写的 top: 10px 就变成了距视口顶部 10px，而不是距 Flex 容器顶部。
- 必须给直接包裹该绝对定位元素的 Flex 容器加
position: relative（哪怕它只为了当锚点） - 别只给外层 wrapper 加 —— 如果中间某级也写了
position: relative，它会“截胡”成为 offsetParent，导致定位错乱 - 用 DevTools 选中元素 → Elements → 查看
offsetParent是谁，就能立刻确认参照对象是否正确
top: 50% 居中却偏上，十有八九是父容器高度为 0
top: 50% 是按父容器的 height 计算的。而 Flex 容器若没设 height 或 min-height，又内部全是 position: absolute 子项（不参与布局），它的计算高度就是 0 —— 此时 top: 50% 等价于 top: 0。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 打开 DevTools → Computed → 检查 Flex 容器的
height值，是不是auto或0px - 优先用
min-height: 100vh或min-height: 100dvh（后者兼容 iOS 地址栏变化） - 或者留一个普通流子项（比如空
<div></div>）撑开高度，比硬写height: 300px更健壮
用了 top: 50%; left: 50% 还没居中？漏了 transform: translate(-50%, -50%)
top: 50%; left: 50% 只是把元素的左上角挪到父容器中心点，不是让整个元素视觉居中。常见现象：元素右下角伸出容器、看起来明显偏右偏下。
- 必须补上
transform: translate(-50%, -50%)，才能以自身宽高为基准回拉一半 - 这个
transform的百分比是相对于元素自己，不是父容器 —— 所以宽高动态变化时依然可靠 - 别指望
justify-content: center或align-items: center对它起作用，它们对position: absolute子项完全无效
明明写了 top: 0 却没贴顶？检查父容器的 padding 和 overflow
top: 0 是相对于父容器的 padding box 上边缘，不是 border box。如果父容器有 padding-top: 20px，那 top: 0 的元素离可视顶部就有 20px 距离。
- 用
outline: 1px solid red临时套在父容器上，看清 content box 边界 - 父容器设了
overflow: hidden？那right: -10px这类微调会被直接裁掉，不是偏移失效，是被切了 - 父容器有
transform（比如scale(0.95)）？它会创建新包含块，导致坐标系变形，top: 0不再对应原始顶部
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
