父容器必须设置明确高度（如min-height: 100vh）且图片的直接父元素需设display: flex并同时声明justify-content: center和align-items: center，避免float或absolute脱离文档流。
图片父容器没设高度，flex 垂直居中会失效
用 display: flex 居中图片时，如果父容器是 <div> 且没设 height 或内容撑不开，align-items: center 就没效果——因为容器高度为 0，没有“垂直方向可居中的空间”。
- 确保父容器有明确高度，比如
height: 300px、min-height: 100vh，或被其他内容撑开 - 若想让图片在视口内居中，直接给父容器设
min-height: 100vh更稳妥 - 避免只靠
height: auto+flex期待垂直居中，这是新手最常卡住的点
忘记写 justify-content 和 align-items 两个属性
flex 水平垂直居中必须同时设置：水平靠 justify-content: center，垂直靠 align-items: center。漏掉任一个，就只能单向居中。
.container {
display: flex;
justify-content: center; /* 水平 */
align-items: center; /* 垂直 */
min-height: 100vh;
}-
justify-content控制主轴（默认是水平），align-items控制交叉轴（默认是垂直） - 如果改过
flex-direction: column，两者的含义会互换，但新手项目里通常不改，默认即可 - 别写成
align-content——它只对多行 flex 容器起作用，单张图片用不到
图片本身设置了 float 或 position: absolute
如果图片加了 float: left 或 position: absolute，它就脱离了 flex 流，justify-content 和 align-items 对它完全无效。
- 检查图片是否意外继承了全局样式，比如重置 CSS 里写了
img { float: left } - 临时加一行
img { float: none; position: static; }排查 - flex 容器内的子元素，除非特殊需要，否则不要手动加
position或float
父容器不是直接包裹 img 的那个元素
常见结构是：<div class="wrapper"><div><img></div></div>。如果只给最外层 .wrapper 加 flex，但中间多了一层没设高度/没参与布局的 <div>，那 flex 样式根本传不到图片上。
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具，选中图片，看 computed 样式里
justify-content和align-items是否生效在它的**直接父容器**上 - 最简做法：让图片的**直接父元素**设
display: flex，而不是隔一层再设 - 如果结构不能改，可用
display: contents让中间层“消失”（注意兼容性：IE 不支持）
实际能跑通的最小代码就是这四行，其余都是干扰项。真正卡住的，往往不是 flex 写错了，而是容器链断在某个看不见的地方。
