flex居中不强制要求父容器设height，但需有明确高度基准（如100vh、min-height或内容撑开），否则align-items:center因父容器高度塌陷而失效；移动端推荐用100dvh替代100vh避坑。
现代前端面试中问“怎么居中”，已经不是考你能不能写出 margin: 0 auto，而是看你能否在不同约束条件下快速判断该用哪种方案、为什么不能用另一种、以及浏览器兼容性是否踩雷。
flex 布局居中必须设父容器 height 吗？
不一定。如果目标是让子元素在「视口内」垂直居中，父容器需有明确高度（比如 height: 100vh），否则 align-items: center 没有参考基准；但如果父容器本身已通过其他方式撑开（如内部有足够高的内容、或设置了 min-height），那就不强制要求写死 height。
容易忽略的点：
-
display: flex的父容器若未设置高度，且子元素无固高，align-items: center可能“没效果”——实际是有效，只是父容器高度塌陷为 0 - 移动端 Safari 对
100vh有滚动条缩放 bug（地址栏收起时vh会变），建议用100dvh替代（支持 Chrome 105+、Safari 16.4+） - 若父容器是
body，记得重置margin: 0，否则默认外边距会干扰居中位置
position: absolute + margin: auto 居中为何不依赖宽高？
因为这种写法利用了绝对定位的“四值定位”机制：left: 0; right: 0; top: 0; bottom: 0 把子元素拉伸到父容器边界，此时再加 margin: auto，浏览器会自动计算并均分剩余空间，从而实现居中——它不要求你知道子元素尺寸，也不依赖 transform。
立即学习“前端免费学习笔记（深入）”；
但要注意：
- 父容器必须是
position: relative（或absolute/fixed），否则absolute会相对于 viewport 定位 - 子元素不能有
float，否则margin: auto失效 - IE8+ 支持，比
transform兼容性更好，适合需要保底的老项目
transform: translate(-50%, -50%) 的坑在哪？
这个组合看似万能，实则对渲染流程有隐式要求：它依赖元素已渲染出几何尺寸，且 top: 50% 和 left: 50% 是基于父容器 content box 计算的。一旦父容器有 border 或 padding，而你又没注意 box-sizing，偏移量就会错。
典型问题场景：
- 父容器用了
box-sizing: border-box，但子元素宽度设的是width: 200px，此时left: 50%是按父容器总宽算的，而translateX(-50%)是按子元素自身宽算的，两者基准不一致 - Safari 旧版本（transform 在
position: sticky容器内的表现不稳定 - 动画中频繁触发
transform会导致合成层激增，低端安卓机可能出现卡顿
图片或文字单行居中还能用 line-height 吗？
可以，但仅限于「单行、无换行、高度固定」的纯文本或替换元素（如 <img>）。原理是让行高撑满容器，再靠 text-align: center 水平居中，line-height 等于容器高就自然垂直居中。
限制很明确：
-
line-height对多行文本无效，vertical-align也只在inline或table-cell场景下起作用 - 图片作为
inline元素，默认 baseline 对齐，下方会留空白（来自基线间隙），必须加vertical-align: middle或display: block - 如果容器字体大小为 0（常见 hack），需确保子元素显式声明
font-size，否则文字会消失
真正难的不是写出某一种居中代码，而是看到一个 DOM 结构和 CSS 上下文，三秒内判断出：这里该用 flex 还是 grid、要不要加 min-height、有没有隐藏的 overflow: hidden 在截断布局流——这些细节，才是面试官想扣住你问到底的地方。
