响应式图片水平居中首选父容器设text-align: center，因img默认inline，margin: 0 auto对其无效；该法轻量兼容，但仅控水平方向，需配合vertical-align: middle等实现图文对齐。
没有“一种写法通吃所有场景”，响应式图片居中必须按需求选方案：纯水平居中用 text-align: center 最轻量；需垂直+水平双向居中且父容器有高度参照，display: flex 是目前最可靠的选择；想兼容极旧 Android（4.4 及以下）或需精细控制，得补前缀或换 position: absolute + transform。
text-align: center 为什么有时不生效？
它只作用于父容器，且只影响行内级子元素——<img> 默认是 inline，所以多数情况管用；但一旦父容器宽度塌缩、被设了 float 或 display: inline-block，或者混入了 <div> 这类块级子元素，居中就会偏移或失效。
- 必须加在父容器上，比如
<div style="text-align: center"><img src="x.jpg"></div>，不能加在<img>自身 - 父容器要有可计算宽度（哪怕只是
width: 100%），否则浏览器无法确定“居中基准” - 该方法只解决水平方向，垂直方向仍贴顶；若要图文混排时文字也对齐，可加
vertical-align: middle到<img>
margin: 0 auto 要满足哪三个硬条件？
这个组合常被误认为“万能居中”，其实它只做一件事：把左右 margin 平分剩余空间。没空间可分，就完全不动。
-
display: block（或inline-block），否则margin: auto对 inline 元素无效 - 图片必须有可计算的宽度：显式
width: 600px或width: 80%；max-width: 100%不行，浏览器无法反推“剩余空间” - 父容器不能是
flex或grid容器，否则会接管 margin 行为
示例：<img src="logo.svg" style="display: block; width: 120px; margin: 0 auto;">
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
flex 布局居中为什么图片还是贴顶？
因为 align-items: center 管垂直，但它需要父容器在交叉轴（通常是高度）上有明确尺寸。没高度，等于让浏览器“在 0px 高的空间里居中”，结果只能贴顶。
- 父容器必须同时设：
display: flex、justify-content: center、align-items: center - 高度必须可解析：推荐
min-height: 100vh（视口高）或height: 500px；height: 100%很可能无效，因上级容器未必有显式高度 -
<img>自身必须加max-width: 100%和height: auto，否则宽屏溢出、窄屏拉伸
示例：<div style="display: flex; justify-content: center; align-items: center; min-height: 100vh;"><img src="hero.jpg" style="max-width: 90vw; height: auto;"></div>
响应式尺寸上限怎么设才不翻车？
只写 max-width: 100% 在宽屏设备上会让图片铺满整个视口，失去呼吸感；硬写 width: 800px 又会在手机上溢出。
- 优先用
max-width: 90vw替代100%，留出左右边距，避免紧贴屏幕边缘 - 若需更强控制，搭配媒体查询设断点：
@media (max-width: 768px) { max-width: 95vw; } - 绝对不要给
<img>设固定height，否则必变形；必须限定高度时，改用容器aspect-ratio+object-fit: cover
真正容易被忽略的是父容器的高度来源——不是“有没有 height”，而是“这个 height 是否可被浏览器稳定解析”。
