flex居中失效主因是父容器无明确高度，导致align-items: center缺乏可计算的交叉轴尺寸；需设height: 100vh或min-height: 100dvh，并确保子元素未脱离文档流。
flex居中失效：父容器没高度是最大坑
写了 display: flex; justify-content: center; align-items: center; 却没效果？八成是父容器没设明确高度。Flex 的 align-items: center 在垂直方向起作用的前提，是交叉轴（即高度方向）有可分配空间——如果父容器 height 是 auto 或未声明，它就只“贴着内容撑开”，哪怕子元素再大，align-items 也无处可居。
常见错误场景：
-
body直接加 flex 但没设height: 100vh或没同步设置html { height: 100% } - 父容器被
float、position: absolute或display: inline-block干扰，脱离正常文档流 - 用了
min-height但没配height，导致 Flex 计算时仍按内容高度处理
正确做法：优先用 height: 100vh（视口高度），简洁可靠；若需兼容老安卓 WebView，可改用 html { height: 100% } + body { height: 100% } 级联方案。
absolute + translate(-50%, -50%) 为什么总偏一点
这个组合本身很稳，但出错几乎都卡在父容器定位上下文缺失或 transform 叠加逻辑混乱上。
关键点：
- 父容器必须有
position: relative（或absolute/fixed），否则top: 50%; left: 50%会相对于整个 viewport 定位，不是你预期的盒子内部 -
translate(-50%, -50%)的百分比是按**自身宽高**算的，不是父容器——这是优势，但新手常误以为要先知道子元素尺寸 - 如果子元素已有其他
transform（比如scale(1.2)或rotate(15deg)），必须合并写：transform: translate(-50%, -50%) scale(1.2)；分开写会被后一条覆盖
Safari 15.4 之前版本对这个组合支持有像素级偏移 bug，若项目需兼容 iOS 15.3 及更早系统，建议换用 margin: auto 方案或加 polyfill。
margin: auto 配合四边定位为何有时不生效
position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 看似全自动，但它有硬性前提，缺一不可。
必须满足：
- 子元素要有明确的
width和height（max-width、min-height、fit-content均无效） - 不能是
display: inline或inline-block，得是块级（如block或flex） - 父容器不能是
display: flex或grid，否则该声明会被忽略
这个方案性能略好于 transform（不触发重绘），适合弹窗、加载 spinner 这类尺寸固定的 UI 元素；但响应式场景下，一旦宽高变成百分比或 vw/vh，它就立刻失效。
text-align: center 不是万能水平居中开关
给父 div 加 text-align: center，却指望里面一个没设宽的子 div 也居中？它不会动。因为 text-align 只控制**行内级内容**（文本、img、span）在行框内的对齐方式，不改变块级元素自身的定位。
适用边界很清晰：
- 让段落文字、按钮内文案、一组
inline-block图标水平居中 - 配合
display: inline-block让多个块级元素“假装”是行内内容来排布 - 在
flex或grid容器里写text-align: center，基本无效——布局引擎已接管对齐逻辑
真正居中块级元素自身，得用 margin: 0 auto（需定宽+块级+普通流）或 justify-content: center（flex 父容器下）。
所有方案里，最容易被忽略的是“上下文依赖”：flex 看父高，absolute 看父定位，margin:auto 看子尺寸。抄代码前，先确认这三件事是否满足——比调样式本身花的时间还多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
