最简单居中响应式图片的方法是给父容器设 text-align: center，但仅对 inline/inline-block 图片有效；需配 max-width: 100% 和 height: auto 实现等比缩放，或用 display: block + margin: 0 auto、flex 的 justify-content/align-items、grid 的 place-items 等方案。
用 text-align: center 居中响应式图片最简单但有前提
直接给图片父容器加 text-align: center 是最快方案，但只对 display: inline 或 inline-block 的 <img> 有效。默认情况下 <img> 就是内联元素，所以只要没被其他 CSS 改成 block 或加了 float，它就能居中。
常见踩坑点：
- 父容器设置了
display: flex却忘了加justify-content: center，结果图片靠左 - 图片加了
width: 100%后变成块级行为，text-align失效 - 用了
object-fit但没配height，导致高度塌陷、居中视觉异常
max-width: 100% 和 height: auto 必须同时写
响应式图片的核心是让宽高随容器缩放，但仅设 max-width: 100% 不够——如果原始图特别高，浏览器可能保留原始高度，撑开布局。必须补上 height: auto 才能等比缩放。
正确写法示例：
@@##@@
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
这里 display: block + margin: 0 auto 是另一套居中逻辑，和 text-align 互斥，但更可控，尤其适合需要上下留白的场景。
Flex 容器里图片不居中？检查 align-items 和 flex-shrink
把图片放进 display: flex 的容器后，水平居中靠 justify-content: center，但垂直方向容易出问题：如果图片原始尺寸大于容器，flex-shrink: 1（默认值）会让它缩小，但若没设 align-items: center，它仍会顶着顶部对齐。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
典型配置：
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 300px;
}
.container img {
max-width: 100%;
height: auto;
}
注意：min-height 是为了确保容器有高度可参考，否则 align-items: center 没效果；另外别给 img 设固定 height，否则破坏响应式。
Grid 布局下用 place-items 最省事
如果父容器是 display: grid，一行代码就能搞定居中：place-items: center。它同时控制水平和垂直对齐，且不受图片是否 inline 影响。
但要注意兼容性：IE 不支持 place-items，如需兼容老版本，得回退到 justify-items + align-items 组合。
示例：
.grid-container {
display: grid;
place-items: center;
min-height: 400px;
}
.grid-container img {
max-width: 100%;
height: auto;
}
真正容易被忽略的是：当图片内容本身有透明边距（比如 PNG 边缘留白），place-items 居中的其实是整个图片盒模型，不是视觉主体——这时候得靠 object-position 微调内容定位，而不是改居中方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
