不一定，父容器无需必须设高度，但无显式高度时align-items: center仍生效，视觉上易误判为无效；需注意高度来源、子元素定位及iOS视口单位差异。
用 display: flex 居中时，父容器必须设高度吗？
不一定，但没高度就可能“看不见居中效果”。flex 居中依赖于主轴（justify-content）和交叉轴（align-items）的参考范围——如果父容器高度由内容撑开，align-items: center 仍会生效，但视觉上容易误判为“没动”。
- 常见错误现象：
div里只有一行文字，加了display: flex; align-items: center;却看不出垂直变化——因为父容器高度刚好等于文字行高 - 真实使用场景：模态框、卡片、登录表单等需要明确尺寸容器的居中；全屏布局建议配合
min-height: 100vh而非固定height: 100vh，避免内容溢出时被截断 - 性能影响极小，
flex对齐是渲染阶段计算，不触发布局重排（re-layout），比transform + position更轻量
justify-content 和 align-items 都设成 center 就一定居中？
90% 情况下是，但有两个关键前提：子元素不能是 float 或 position: absolute，且父容器必须是 flex 容器（display: flex 或 display: inline-flex）。
- 常见错误现象：子元素用了
position: absolute，父容器加了display: flex; justify-content: center; align-items: center;，结果完全不响应——绝对定位元素已脱离 flex 流 - 参数差异：
align-items控制所有子项在交叉轴上的对齐；若只想居中某一个子元素，得用align-self: center覆盖它自己的行为 - 兼容性注意：IE10–IE11 对
align-items: center在min-height容器中有 bug，建议降级用align-content: center（仅对多行 flex 容器有效）或补height: 100%
单个子元素想水平垂直居中，margin: auto 能替代 flex 吗？
可以，但限制极多：必须是块级元素、父容器需设 display: flex 或 display: grid，且子元素不能设固定宽高以外的尺寸约束（比如 max-width 可能干扰）。
- 常见错误现象：给子元素设了
width: 100%，再加margin: auto，结果水平没居中——因为宽度已占满，左右 margin 自动变为 0 - 使用场景：适合图标、加载 spinner 这类尺寸固定的内联元素（
display: block后），代码更短：margin: auto一行搞定，无需配两个align-属性 - 注意点：
margin: auto在 flex 容器中同时作用于主轴和交叉轴；但在普通块流中，它只影响水平方向，垂直方向无效
Flex 居中在移动端 Safari 上失效？
大概率是 Safari 对 min-height: 100vh 的解析问题：iOS 15+ 之前，Safari 把地址栏高度算进 vh，导致容器实际高度小于预期，align-items: center 看起来“偏上”。
立即学习“前端免费学习笔记（深入）”；
- 解决方法：用
min-height: 100dvh替代100vh（dvh是动态视口单位，Safari 16.4+ 支持）；兼容旧版可加 JS 补丁：document.documentElement.style.setProperty('--vh', window.innerHeight * 0.01 + 'px')，CSS 中用min-height: calc(var(--vh, 1vh) * 100) - 别踩的坑：不要用
height: 100%试图继承父高——如果父容器没显式高度，百分比会计算为 0 - 另一个干扰项：iOS 键盘弹出时
vh会动态收缩，dvh不受此影响，更适合表单页
事情说清了就结束。真正卡住人的，往往不是 flex 居中本身，而是父容器高度来源、子元素定位方式、以及 iOS 视口单位那点微妙的偏差。
