根本原因是父容器未启用flex上下文或高度塌陷；必须显式设display: flex和min-height/height，且子元素不能脱离文档流。
父容器必须启用 flex 且有明确高度
写了 justify-content: center 和 align-items: center 却没效果？根本原因不是 CSS 写错了，而是父容器没真正进入 flex 上下文，或者高度塌陷了。嵌套结构里，上层容器（比如 .container2）若仍用 width: 1000px 固定宽，下层 .divbox3 就无法继承响应式宽度，导致图片即使设了 max-width: 100% 也卡在固定尺寸里。
实操建议：
- .container2 改为 max-width: 1000px; width: 100%; margin: auto;，放弃固定 width
- .divbox3 必须设 width: 100%（不能留空或写 1000px），并加 box-sizing: border-box
- 如果要垂直居中，.divbox3 本身就得有高度参照——要么设 min-height: 200px，要么靠外层容器提供 height 或 min-height
图片不能脱离文档流
嵌套越深，越容易误加 position: absolute、float 或 display: inline-block，这些都会让图片脱离 flex 容器的对齐控制。一旦脱离，justify-content 和 align-items 就完全失效。
常见错误现象：
- 图片突然“飘”到左上角或顶部 —— 很可能父容器是 relative，而图片被加了 absolute
- 水平居中了但垂直贴顶 —— 图片还在行内流，或父容器高度为 auto 且无内容撑开
- 多张图片错位堆叠 —— 某个中间容器用了 display: grid 或 inline-flex，覆盖了外层 flex 行为
正确做法：
- 保持 img 是普通子元素，不加 position、float，也不手动设 margin
- 居中逻辑全交给父级 flex 容器
- 避免在祖先容器中用 font-size: 0（常用于清除间隙），否则图片可能消失或错位
响应式缩放与居中必须分离控制
很多人试图用一个媒体查询同时改 width、margin 和 text-align，结果维护困难、样式冲突。响应式对齐的核心是“按断点切换容器行为”，不是反复重写图片样式。
实操要点：
- 图片基础样式只写一次：max-width: 100%; height: auto;（这是缩放的唯一可靠依据）
- 对齐方式交给父容器控制：小屏用 justify-content: center，大屏换 justify-content: flex-start
- 若需兼容旧环境，回退方案也只改父容器的 text-align，不碰 img 标签本身
- 别把 display: flex 直接加到通用类（如 .container）上，应新建语义化容器（如 .hero-img）封装
移动端和旧浏览器的隐藏坑
现代移动端基本支持 flex，但两个细节常被忽略：
- iOS 9–11 的 Safari 需要 display: -webkit-flex 前缀，只写标准写法会静默失效
- 父容器若没设 min-height，图片加载前渲染完成，align-items: center 会因交叉轴长度为 0 而无效，表现为水平居中但紧贴顶部
稳妥写法示例：
<div style="display: -webkit-flex; display: flex; justify-content: center; align-items: center; min-height: 200px;"> <br> @@##@@<br> </div>
注意：
min-height 比 height 更安全，既防塌陷，又允许内容超出时自然滚动；aspect-ratio 可配合使用，进一步防止拉伸或裁切。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
