必须同时设置display: flex、min-height: 100vh（或100dvh）、justify-content: center和align-items: center，且子元素不能脱离文档流；因justify-content控制主轴（默认水平），align-items控制交叉轴（默认垂直），二者缺一不可，而父容器无明确高度时align-items失效。
父容器必须设display: flex且有明确高度
只写justify-content: center和align-items: center没用——这两个属性只在display: flex或display: inline-flex的容器上生效。更常被忽略的是高度：如果父容器没设height或min-height，它会由子元素撑开，align-items: center就失去垂直参照基准。
实操建议：
- 优先用
min-height: 100vh，比height: 100vh更容错（避免内容超长时溢出） - 在移动端，改用
min-height: 100dvh，能响应地址栏收放；iOS老版本可加min-height: -webkit-fill-available兜底 - 不要依赖
body或html直接设flex——它们默认无高度，需显式设height: 100%并确保所有祖先都有高度传递
justify-content和align-items必须同时设center
这不是“推荐做法”，而是功能分工决定的：justify-content管主轴（默认水平），align-items管交叉轴（默认垂直）。单独设其中一个，只能实现单方向居中。
容易踩的坑：
- 误以为
text-align: center能居中块级子元素——它只对内联内容有效 - 写了
flex-direction: column却还按“水平=justify、垂直=align”理解，结果两个属性作用方向反了 - 子元素用了
position: absolute或float，脱离文档流后，flex对齐完全失效
盒模型干扰会让视觉居中“偏移”
flex居中计算的是内容区（content box）中心，但padding、border、margin都会影响最终视觉位置。比如父容器设了padding: 20px，子元素虽居中于内容区，看起来却像往下往右偏了20px。
解决办法：
- 父容器统一加
box-sizing: border-box，让width/height包含padding和border - 子元素避免设
margin——flex居中不靠它，反而叠加偏移 - 需要内边距时，在子元素内部再包一层容器设
padding，而不是直接加在居中目标上
IE11和部分老Android WebView有兼容陷阱
IE11支持flex，但align-items: center在某些组合下会失效：比如父容器是flex-direction: column且子元素为table，或用了min-height。另外，min-height: 100vh在IE11的flex容器里解析不准，常导致垂直方向塌陷。
稳妥方案：
- 加
-ms-前缀：-ms-align-items: center（仅IE10–11） - 避免在IE场景用
100vh，改用固定高度或JavaScript动态计算 - 真要兼容IE，回退到
position: absolute + transform: translate(-50%, -50%)方案，别混用flex和绝对定位
justify-content: center生效了，align-items却像没起作用——八成是父容器高度没撑起来，或者子元素悄悄脱离了文档流。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
