CSS图片居中问题全解析

• 确保父容器有明确高度，比如 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 的那个元素

常见结构是：