直接给加margin: auto无效，因其默认为内联元素；设为display: block仅支持水平居中，垂直居中需父容器有明确高度并启用flex布局，且须同时设置justify-content: center、align-items: center及min-height。

为什么直接给 <img> 加 margin: auto 不行

因为 <img> 默认是内联元素，margin: auto 对内联元素无效；即使设成 display: block，也只管水平居中，垂直方向仍依赖父容器高度和布局上下文。更关键的是：在响应式场景下，图片宽高随视口缩放，若父容器没明确高度或未启用弹性对齐，垂直居中会直接失效。

.img-container { display: flex } 必须配哪些属性

仅写 display: flex 不够。要真正居中，至少补全这三项：

• justify-content: center —— 控制主轴（默认水平）居中
• align-items: center —— 控制交叉轴（默认垂直）居中
• 父容器要有可计算的高度，比如 min-height: 100vh 或 height: 500px；用 min-height 更安全，避免内容撑高后截断

max-width 和 width: auto 为什么不能少

响应式图片的核心是“不拉伸、不溢出、保比例”。常见错误是写 width: 100% 或同时设 width 和 height：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• width: 100% 在 flex 容器中可能强制拉满，导致小图被撑变形
• 只设 max-width: 90vw + max-height: 80vh，再加 width: auto; height: auto，浏览器才按原始宽高比缩放
• 如果图片本身窄高（如竖构图），max-height 会起主导作用；反之 max-width 主导——这是自动适配的关键

图文混排时别把整个 设成 flex

全局设 body { display: flex; flex-direction: column; align-items: center } 看似省事，但会破坏段落流：

• 正文中的普通段落、列表、链接全部被强制居中，文字环绕图片失效
• 后续想让某张图左浮动+文字绕排，会和 flex 的列式布局冲突
• 正确做法：为每张需居中的图单独包一层 <figure class="img-container"></figure>，样式隔离，互不影响

最易被忽略的一点：flex 居中依赖父容器的“尺寸可见性”。如果父容器是空的、或仅靠内容撑开、又没设 min-height，align-items: center 就找不到垂直参考线——这时候图片看起来“没动”，其实是它根本没地方可居中。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！