最稳的跨屏幕响应式图片居中方案是display: flex + justify-content: center + align-items: center，但需确保父容器有明确高度、img未脱离文档流且带缩放约束。
直接用 display: flex + justify-content: center + align-items: center 是目前最稳的跨屏幕响应式图片居中方案，但必须确保父容器有明确高度、<img> 未脱离文档流、且图片自身带缩放约束——缺一不可。
为什么 text-align: center 在小屏上突然失效
它只作用于父容器，且只影响行内级子元素。失效常见于：
- 父容器被设了
float或display: inline-block，导致宽度塌缩，没空间可居中 -
<img>外层混入了<div>等块级元素，它们不响应text-align，却把容器撑高/撑宽，视觉上“偏了” - 窄屏下图片因没加
max-width: 100%而溢出，看起来像居中失败，其实是尺寸失控 - 父容器用了
font-size: 0清间隙，但没同步设line-height: 0或vertical-align: top，导致图片底部留白错位
margin: 0 auto 加了也不居中？检查这三点
这个组合对 <img> 生效的前提非常具体：
- 必须显式加
display: block（<img>默认是inline） - 不能只靠
max-width: 100%——浏览器无法据此计算“剩余空间”，得配一个可推导的宽度，比如width: 100%或固定值width: 320px - 父容器不能是
flex或grid容器，否则margin行为被接管，静默忽略 - 若图片包在
<a>里，还要确认<a>没被设成display: inline且没加float
flex 居中总贴顶？高度来源没写对
align-items: center 垂直居中依赖父容器在交叉轴（通常是高度）上有明确尺寸。常见错误：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 只写了
min-height: 300px却没内容撑开容器，实际高度仍是 0 → 垂直方向无参照 - 用了
height: 100vh，但页面顶部有position: fixed的 header，导致图片被遮挡 - 父容器是
<body>或<main>，但没清除默认 margin/padding，或被其他样式重置了高度 - 旧 Android（4.4 及以下）需补
display: -webkit-flex和对应前缀，否则完全不识别
推荐写法：<div style="display: flex; justify-content: center; align-items: center; min-height: 300px;"><img src="x.jpg" style="max-width: 90vw; height: auto;"></div>
响应式对齐切换别动 <img> 样式
媒体查询的目标不是反复定义图片尺寸，而是控制容器对齐行为本身：
- 图片基础样式只需一次：
max-width: 100%+height: auto+display: block（如需） - 小屏居中：
@media (max-width: 768px) { .img-container { text-align: center; } } - 大屏右对齐：
@media (min-width: 1025px) { .img-container { display: flex; justify-content: flex-end; } }（注意别和text-align混用） - 如果父容器已用
flex，就别再加text-align，CSS 会忽略后者
真正难的不是写哪行代码，而是每次改完都要确认：父容器高度有没有被其他样式悄悄覆盖？图片是否还在文档流里？max-width 的参照容器是不是你以为的那个？
