用 text-align: center 是最轻量的图片水平居中方案，只需父容器设置即可；全屏响应式居中必须用 flex + 100vh；object-fit 仅在容器有明确宽高时生效。
直接用 max-width: 100% + height: auto 就能保持宽高比，居中则必须靠父容器控制——图片自己没法“居中”，它只是被容器推到中间的。
为什么 margin: 0 auto 单独写在 <img> 上经常失效
因为 <img> 默认是行内元素，margin: 0 auto 对它完全不生效；就算加了 display: block，也还得满足两个硬条件：
- 图片必须有明确宽度（比如
width: 400px或width: 80%），不能只写max-width: 100% - 父容器得有明确宽度（不能是
float、inline-block或未设width的 flex 容器） - 如果父容器用了
display: flex，margin: 0 auto会被忽略——flex 子项的居中由justify-content控制
text-align: center 是最轻量的水平居中方案
它天然适配 <img> 的行内特性，不需要改 display，也不依赖 flex：
- 只对父容器设置
style="text-align: center"，里面所有行内内容（包括图片）自动水平居中 - 兼容 IE9+ 和所有现代浏览器，无前缀、无 polyfill
- 若父容器里混了
<div>等块级元素，它们不会被居中——这是优点，不是 bug - 垂直方向不管：图片仍贴顶，如需垂直居中，得配合
line-height、padding或外层 flex
全屏响应式居中必须用 Flex + height: 100vh
要让图片随窗口缩放始终在视口正中央（水平+垂直），唯一可靠且简洁的方式是：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex; justify-content: center; align-items: center; height: 100vh - 图片自身只加
max-width: 100%; height: auto，别写width或height - 避免给父容器加
width: 1000px这类固定宽度——它会让窄屏出现横向滚动条，图片溢出 - 如果图片过大，可加
max-width: 90vw留边距，但不要加max-height，否则可能破坏比例
object-fit 不是用来保比例的，别误用
很多人以为写了 object-fit: contain 就能“自动适配并居中”，其实它只在容器已有明确宽高的前提下才起作用：
-
<img src="x.jpg" style="width: 300px; height: 200px; object-fit: contain;">✅ 有效 -
<img src="x.jpg" style="max-width: 100%; height: auto; object-fit: contain;">❌ 无效——没有固定容器尺寸，object-fit失去参照基准 - 原始宽高比异常（比如微信下载图、CMS 导出图）时，
object-fit会放大失真，此时应优先检查图片文件本身是否损坏
真正容易被忽略的是：父容器的尺寸继承链。哪怕你把所有图片样式都写对了，只要上层某个 <div> 还锁着 width: 1000px，整个响应逻辑就断了——缩放、居中、保比，全都会在窄屏下崩掉。
