最可靠方案是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。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 常见错误：给 <img> 直接加 style="max-width:90%" → 水平居中可能失效或不稳定
• 更糟的情况：父容器是 display: flex 或 display: grid，会完全接管子元素的 margin 行为
• 真正安全的做法是放弃对图片本身设 margin，改用父容器控制布局上下文

flex 布局实现响应式居中时的关键配置

这不是“加三行 CSS 就完事”，而是要理解 flex 容器和子项的协作关系。重点不在图片，而在包裹它的那个 <div>。 <ul> <li>父容器必须设 <code>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 干扰了文档流，比“用什么方法居中”更能决定最终效果。先检查这些，再调样式。