直接用 max-width: 100% + text-align: center（父容器上）可实现不溢出和水平居中，但垂直居中需额外约束；height: auto 是保持宽高比、防止拉伸的必要补充，所有居中方案均依赖父容器提供有效尺寸上下文。
直接用 max-width: 100% + text-align: center（父容器上）就能同时实现“不溢出”和“水平居中”，但垂直居中必须另加约束，且所有方案都依赖父容器是否提供有效尺寸上下文。
为什么 max-width: 100% 必须配 height: auto
只设 max-width: 100% 而不设 height: auto，浏览器会保持原始高度，导致宽高比断裂、图片拉伸或压缩。尤其在响应式缩放时，原始高度可能远大于当前宽度对应的比例值。
-
height: auto是强制浏览器按原始宽高比重算高度的唯一可靠方式 - 如果写了
height: 100px或height: 50%，max-width: 100%就失去意义——它只限制宽度，不限制高度 - 某些 CMS 或富文本编辑器会自动注入
width和height属性，需用 CSS 覆盖：img { width: auto !important; height: auto !important; }
text-align: center 居中失效的三个常见原因
这个方法最轻量，但也是翻车率最高的——它不作用于 img 自身，而完全依赖父容器状态。
- 父容器被设了
float、position: absolute或display: inline-block，导致其宽度塌缩为“内容宽度”，text-align失去作用范围 - 父容器里混了
<div>等块级元素，它们不受text-align影响，会把图片挤到一侧 - 父容器用了
font-size: 0（常用于清除 inline 元素间隙），此时img作为行内元素会被“压扁”，需单独加font-size: initial恢复
要垂直居中？别只写 justify-content: center
Flex 布局是目前唯一能稳定双向居中的现代方案，但三要素缺一不可：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
display: flex、justify-content: center、align-items: center - 父容器必须有明确高度参照，比如
height: 100vh或min-height: 400px；没有高度，align-items就无空间可居中 - 图片自身仍需
max-width: 100%+height: auto，否则大图会撑破容器或变形 - 旧 Android（4.4 及以下）需补
display: -webkit-flex和对应前缀，否则整个 flex 行为不触发
margin: 0 auto 在响应式场景下基本不可靠
很多人试了 style="margin: 0 auto;" 没反应，不是代码写错，而是它根本不适配响应式逻辑：
-
img默认是inline，margin: auto对其水平方向无效 - 即使加了
display: block，max-width: 100%会让浏览器认为“宽度已占满”，margin: auto失去剩余空间可分配 - 父容器若为
flex或grid，margin行为会被布局引擎接管，直接忽略 - 它完全不处理垂直方向，窄屏下图片大概率贴顶，无法随视口高度变化自适应
真正容易被忽略的是：居中行为永远属于父容器的职责，而不是图片自身的样式任务。写在 img 上的任何居中尝试（如 margin、text-align）都是反模式。复杂点在于，你得判断当前场景到底需要“内容区居中”还是“视口级居中”，前者用 min-height，后者才用 height: 100vh——混用会导致小屏留白过大或大屏截断。
