绝对定位元素用 transform 居中时宽高为 0，是因为脱离文档流后未设宽高且子元素依赖父尺寸导致坍塌；应改用 flex 布局在父容器上设置 justify-content 和 align-items 实现可靠居中。
绝对定位元素用 transform: translate(-50%, -50%) 居中时，为什么宽高会变成 0？
因为绝对定位元素脱离文档流后，若未显式设置 width 和 height，且内部内容又依赖父容器尺寸（比如百分比、flex 子项），就容易触发尺寸坍塌——浏览器无法推导出其固有尺寸，最终渲染为 0×0。
常见于：用 position: absolute + top: 50%; left: 50% + transform: translate(-50%, -50%) 居中一个 display: flex 容器，结果里面子项全挤成一条线，甚至看不见。
- Flex 容器本身没设宽高 → 父级（绝对定位元素）尺寸为 0 → Flex 子项的
flex: 1或width: 100%失效 - 浏览器计算顺序是：先确定绝对定位元素尺寸，再布局其子元素；它不会“回溯”去根据子元素反推自身尺寸
- 即使子项有固定像素宽高，若父级 Flex 容器设了
flex-wrap: wrap或align-items: stretch，仍可能因主轴/交叉轴拉伸逻辑异常而表现错乱
用 Flex 替代绝对定位居中，但保留“相对于视口居中”的效果
核心思路：不靠 position: absolute，改用 display: flex + justify-content/align-items 在 body 或全屏容器上直接居中。这样 Flex 容器始终参与布局，尺寸自然撑开。
- 把需要居中的内容包进一个
div，设display: flex，并让它的父容器（如body或全屏div）也设display: flex - 父容器加
justify-content: center和align-items: center，即可实现真正的居中，无需transform - 如果必须限制居中区域范围（比如只在某个弹窗内居中），就把 Flex 容器设为该弹窗的直接子元素，并确保弹窗有明确宽高或
min-height: 100vh - 注意：
body默认有 margin，要重置为margin: 0，否则居中会偏移
示例：
html, body { height: 100%; margin: 0; }
body { display: flex; justify-content: center; align-items: center; }
.centered-box { width: 300px; height: 200px; background: #eee; }
Flex 居中时，子元素用 flex: 1 却不占满？检查父容器是否被压缩
Flex 子项不占满，往往不是 flex 写错了，而是父 Flex 容器本身被外部约束压扁了——比如父容器是绝对定位，又没设宽高，或者被 max-width / overflow 干扰。
立即学习“前端免费学习笔记（深入）”；
- 确认父 Flex 容器的
width和height是否为auto（尤其在绝对定位上下文中）；如果是，手动设为width: fit-content或具体值 - 如果父容器是
position: absolute，建议直接放弃它，改用 Flex 布局层级控制；非要保留，至少给它加inset: 0（等价于top: 0; right: 0; bottom: 0; left: 0）再套 Flex -
flex: 1依赖父容器主轴尺寸，若父容器主轴方向是 column 且没设height，子项高度就不会扩展 - 避免在 Flex 容器上同时用
width: 100%和flex: 1，二者语义冲突，容易触发浏览器尺寸计算歧义
兼容性与性能：Flex 居中比绝对定位 + transform 更稳，但别滥用嵌套
Flex 居中在现代浏览器中无兼容问题（IE11 需加 -ms- 前缀，但已基本可忽略）；性能上，它不触发重排，只涉及重绘，比频繁修改 top/left 更轻量。
- 深层嵌套 Flex（比如三层以上
display: flex）可能导致尺寸推导链过长，某些安卓 WebView 会偶发计算错误，建议控制在两层以内 - 不要为了“居中”而把整个页面结构改成 Flex，只对需要动态居中的模块局部启用
- 如果内容需响应式缩放（比如弹窗随屏幕变小），优先用
max-width+margin: auto，而非 Flex —— 后者在小屏下容易因align-items: center把内容截断
真正麻烦的从来不是 Flex 怎么写，而是你忘了它所处的父容器，正被另一个更霸道的定位规则悄悄压扁。
