flex 居中失效最常见的原因是父容器未设 display: flex，或子元素脱离文档流；需确认父容器启用 flex、子元素未用 absolute/floating，且父容器有明确高度。
flex 居中为什么写了 justify-content 和 align-items 还不生效
最常见的原因是父容器没设 display: flex，或者子元素是float、position: absolute 这类脱离文档流的元素——flex 只管“参与布局”的直接子项。
- 确认父容器有
display: flex（不能只写inline-flex除非你真需要内联行为） - 检查子元素是否被
position: absolute或float干扰，flex 居中对绝对定位元素无效 - 如果子元素是
img或button等替换元素，注意它们可能有默认vertical-align或margin影响视觉对齐 - IE10–11 对
align-items: center在min-height场景下有 bug，建议加height: 100%兜底
justify-content 和 align-items 取值怎么选才不反直觉
这两个属性控制的是主轴和交叉轴，而主轴方向由 flex-direction 决定——很多人卡在这儿。默认 flex-direction: row，所以justify-content 管左右，align-items管上下；一旦改成column，角色就互换。
-
justify-content: center+align-items: center是最常用组合，适用于大多数居中场景 - 想让多个子项在容器内均匀分布？用
justify-content: space-between，但注意它不居中单个元素 -
align-items: stretch是默认值，会让子项拉满交叉轴高度 / 宽度，有时反而破坏居中效果，务必显式设为center - 如果子项本身有
margin，flex 不会自动抵消，需手动清空或用gap替代
移动端或老浏览器里 flex 居中突然错位怎么办
Android 4.4 以下、iOS 8.3 以前的 Safari 对 align-items: center 支持不稳定，尤其当父容器高度靠 vh 或calc()计算时。这不是写法错，是渲染引擎缺陷。
- 优先用
min-height: 100vh代替height: 100vh，避免视口缩放导致高度塌陷 - 在 iOS 8–9 上，给父容器加
align-content: center（虽冗余但能触发修复） - 如果必须兼容 IE10，改用
display: -ms-flexbox前缀，并确保-ms-flex-pack: center和-ms-flex-align: center都写全 - 避免在 flex 容器上同时用
transform: translateY(-50%)这类 JS 补丁，会和 flex 冲突
flex 居中后内容溢出或换行异常
flex 居中本身不处理内容尺寸，它只调整位置。当子元素宽高超过父容器，又没设 overflow 或flex-shrink，就会撑破布局或文字强制换行。
立即学习 “ 前端免费学习笔记（深入）”；
- 给子元素加
max-width: 100%和max-height: 100%，防止图片 / 视频溢出 - 文字块用
white-space: nowrap配合overflow: hidden可防换行，但要小心截断 - 如果子元素是弹性盒子（比如内部也用了 flex），记得检查它的
flex-wrap是否为wrap，否则可能横向溢出 - 慎用
flex: 1在居中子项上——它会让子项抢占所有剩余空间，反而掩盖居中意图
flex 居中最容易被忽略的其实是“父容器的高度来源”。没有明确高度（哪怕只是 min-height），align-items: center 就失去参照系——这点比写错属性值更常导致失败。
