最可靠方案是display: flex配合justify-content: center和align-items: center，但父容器必须有明确高度且不塌陷，否则垂直居中失效；margin: 0 auto仅水平有效且依赖块级+明确宽度，在响应式中因max-width: 100%等导致宽度不可算而常失效。
直接用 display: flex + justify-content: center + align-items: center 最可靠，但必须确保父容器有明确高度且不塌陷——否则垂直居中根本不会生效。
为什么 margin: 0 auto 在响应式场景下经常失效
它只管水平方向，且依赖两个硬条件：图片得是 display: block，还得有可计算的宽度。而响应式图片常用 max-width: 100% 或 width: 100%，这会让浏览器无法确定“剩余空间”，margin: auto 就退化为 margin: 0。
- 常见错误：给
<img>直接加style="display: block; margin: 0 auto; max-width: 100%;"→ 水平居中可能失效或不稳定 - 更糟的情况：父容器是
display: flex或display: grid，会完全接管子元素的 margin 行为 - 真正安全的做法是放弃对图片本身设 margin，改用父容器控制布局上下文
flex 布局实现响应式居中时的关键配置
这不是“加三行 CSS 就完事”，而是要理解 flex 容器和子项的协作关系。重点不在图片，而在包裹它的那个 <div>。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 父容器必须设
display: flex、justify-content: center（水平）、align-items: center（垂直）——缺一不可 - 父容器必须有高度参照：
height: 100vh（全视口）、min-height: 400px（最小高度）、或通过内容撑开（但不能依赖图片自身高度） - 图片自身只需
max-width: 100%+height: auto，避免拉伸；若需限制最大尺寸，可用max-width: 90vw - 旧 Android（4.4 及以下）需加
display: -webkit-flex，现代项目可忽略
媒体查询切换对齐方式时，别碰图片尺寸
响应式对齐的本质是“按断点改变容器行为”，不是反复重写图片样式。很多人在每个 @media 里都写一遍 img { width: 100% }，这既冗余又容易冲突。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：只在媒体查询中修改父容器的
text-align（兼容老浏览器）或justify-content（flex 布局） - 例如小屏居中、大屏右对齐：
@media (min-width: 1025px) { .img-container { justify-content: flex-end; } } - 如果用了
text-align，注意它对display: block的图片无效，只影响 inline 元素；此时必须保持图片默认display: inline或用inline-block - 避免同时混用
text-align和flex—— 容器一旦设了display: flex，text-align就被忽略
最容易被忽略的一点：图片是否加载失败、是否有 float 或 position: absolute 干扰了文档流，比“用什么方法居中”更能决定最终效果。先检查这些，再调样式。
