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就失去参照系——这点比写错属性值更常导致失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
