justify-content: center在column布局中失效，因主轴（垂直方向）需有明确高度才能生效；常见原因是父容器高度为auto、min-height: 0或被overflow截断，须设min-height: 100vh并清除body默认margin。
justify-content: center在column布局里没反应，先看父容器有没有高度
flex-direction: column时，justify-content控制的是**垂直方向**（主轴）对齐，但它必须有可计算的主轴长度才能生效。如果父容器高度是auto、min-height: 0或被overflow: hidden截断，浏览器就找不到“上下边界”，justify-content: center自然不工作。
常见错误现象：加了justify-content: center后子元素还是贴顶，或者整个容器高度塌缩为0。
- 给父容器加
min-height: 100vh（比height: 100vh更稳妥，避免内容撑高后溢出） - 检查
body和html是否有默认margin，加body { margin: 0; } - 若嵌套在另一个Flex容器中，确认中间层是否漏了
min-height: 0（Chrome下尤其敏感） - 用开发者工具查看父容器的
computed height，必须 > 0
align-items: center看起来没效果？其实是它根本没管“垂直”
当flex-direction: column时，交叉轴变成**水平方向**，所以align-items: center只负责让子元素**水平居中**，跟垂直对齐无关。很多人误以为它是“万能居中”，结果调了半天发现文字还是靠左、按钮还是贴边。
典型场景：一个div里放多行文字，加了justify-content: center和align-items: center，但文字每行仍是左对齐。
-
justify-content: center→ 控制子元素整体在容器内垂直居中 -
align-items: center→ 控制子元素整体在容器内水平居中（不是控制内部文字） - 若子元素是文字块（如
<p></p>），还需单独加text-align: center才让文字居中 - 若子元素宽度未限制（比如没设
max-width），text-align: center可能看不出效果
WebView或旧版Safari里justify-content行为异常，强制声明flex-direction
某些Android WebView、微信iOS旧版、小程序引擎不会把flex-direction默认当成row，而是按自身逻辑 fallback，导致你写的justify-content: center实际作用在水平方向上——也就是“想垂直居中，结果变水平居中”。
这不是样式写错了，是渲染引擎对未显式声明值的处理差异。
- 永远显式写
flex-direction: column，别依赖默认值 - 用
getComputedStyle(el).flexDirection在控制台直接读取，不要只看样式面板 - 在微信小程序等环境，若
flex-direction: row仍不稳，可临时用flex-direction: row-reverse; justify-content: flex-end模拟 - 避免用
100vh：部分WebView会把它解析成屏幕高度而非视口高度，改用height: -webkit-fill-available
fixed定位容器里justify-content失效，换掉position: fixed
把display: flex; justify-content: space-around直接套在position: fixed; bottom: 0;容器上，大概率失败。因为fixed脱离文档流，宽度默认为内容宽，没有稳定主轴尺寸，justify-content无法计算间距。
iOS Safari软键盘弹出时还容易导致整个菜单上浮或错位。
- 改用整页
flex-direction: column布局：min-height: 100vh+flex: 1主体 + 固定高度底部容器 - 底部菜单容器必须设显式
height（如height: 60px），不能height: auto - 菜单项统一用
flex: 0 0 auto防止被压缩，文字加text-align: center - 避免
width: fit-content或display: inline-flex套在fixed容器上
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
