父容器需有明确高度且子元素未脱离文档流，justify-content和align-items才生效；常见错误是父容器无height、子元素用absolute/float、flex-direction影响主/交叉轴方向。
直接给父容器加 display: flex、justify-content: center 和 align-items: center 就能居中，但 90% 的失败不是写法错，而是父容器没高度或子元素脱离了文档流。
为什么 justify-content 和 align-items 看起来没生效
最常踩的坑是：父容器没设 height 或 min-height，尤其在垂直方向。因为 align-items: center 依赖交叉轴（默认是垂直方向）有可计算尺寸；如果父容器高度塌缩成内容高，就“没地方可居中”。
- 检查父容器是否写了
height: 100vh、min-height: 100vh，或至少一个固定值（如height: 400px） - 若父容器是
body或html，确认已重置：html, body { height: 100%; margin: 0; } - 子元素用了
position: absolute或float？它们已脱离文档流，flex居中对其完全无效 - 子元素是纯文本或
span？Flex 会自动块化，但若存在vertical-align或默认line-height，可能造成视觉偏移
justify-content 和 align-items 的主轴/交叉轴容易搞反
这两个属性的方向不固定，由 flex-direction 决定——不是“justify 水平、align 垂直”这么简单。
- 默认
flex-direction: row：主轴水平 →justify-content控制左右，align-items控制上下 - 改成
flex-direction: column：主轴变垂直 →justify-content就控制上下，align-items反而管左右 - 想让多个子项在容器内均匀分布且整体居中？别用
justify-content: space-between，它不居中单个元素；改用gap+justify-content: center - 误用
align-content: center是高频错误：它只对多行（flex-wrap: wrap且换行了）有效，单行场景下完全不触发
移动端和老浏览器里居中错位怎么办
iOS 8–9、Android 4.4 以下、IE10–11 对 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%)，它和 flex 居中逻辑冲突，会导致跳动或偏移
子元素溢出或文字换行破坏视觉居中
Flex 居中的是整个子元素盒子，不是盒子里的内容。内容超宽、字体过大、或强制不换行，都会让“居中”看起来失效。
- 图片/视频类子元素加
max-width: 100%和max-height: 100%防撑破 - 文字块用
text-align: center+word-break: break-word控制内部对齐与折行 - 避免同时给子元素设
margin: auto和父容器设justify-content: center，两者叠加可能意外偏移 - 子元素是
button或img时，注意它们自带默认margin或vertical-align，建议显式清空：margin: 0; vertical-align: top;
真正卡住人的从来不是怎么写那三行 CSS，而是父容器有没有被正确“撑开”，以及子元素到底还在不在 Flex 的管辖范围内。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
