响应式图片居中需区分场景：仅水平居中用text-align: center（父容器设）或margin: 0 auto（块级+定宽）；视口正中须flex+justify-content/align-items+min-height: 100vh；防溢出需max-width/max-height+width/height: auto。
响应式图片居中不是加个 margin: 0 auto 就能稳住的，关键得看你要的是“仅水平居中”，还是“视口级正中间”，以及是否要适配小屏不溢出、大屏有留白——三者逻辑完全不同，混用必翻车。
text-align: center 只管水平居中，但必须写对位置
它只在父容器上生效，且只影响行内级子元素。img 默认就是 inline，所以最轻量的写法是：
<div style="text-align: center"><img src="a.jpg" style="max-width: 100%; height: auto;"></div>
常见错误包括：
立即学习“前端免费学习笔记（深入）”；
- 把
text-align: center写在img标签里 → 完全无效 - 父容器用了
float或display: inline-block导致宽度塌缩 → 图片偏左 - 父容器里混了
div等块级元素 → 它们不受影响，可能把图片挤出中心 - 忘了给图片加
max-width: 100%和height: auto→ 窄屏下溢出或拉伸变形
flex 布局实现视口正中间，高度不能塌
要让图片在屏幕中央（水平+垂直），display: flex 是目前最可靠方案，但三个条件缺一不可：
- 父容器必须设
display: flex，不是img自己设 - 必须同时写
justify-content: center（水平）和align-items: center（垂直） - 父容器要有明确高度参照，比如
min-height: 100vh或height: 400px；只写width: 100%会导致垂直方向失效
错误示范：<div style="display: flex; justify-content: center; align-items: center"> → 高度为 0，图片贴顶
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
正确写法：<div style="display: flex; justify-content: center; align-items: center; min-height: 100vh;"><img src="b.jpg" style="max-width: 90vw; height: auto;"></div>
注意：min-height: 100vh 比 height: 100vh 更安全，避免内容超长时被截断。
响应式尺寸上限怎么设才不撑破布局
只写 max-width: 100% 在宽屏下会让图片铺满整个视口，失去视觉呼吸感；硬写 width: 800px 又会在手机上横向滚动。真正可控的做法是：
- 用
max-width: 90vw替代100%，左右各留 5% 边距 - 搭配
max-height: 80vh防止高图撑高容器 - 必须同时写
width: auto; height: auto，否则浏览器不会按比例缩放 - 避免对
img单独设固定height，会强制拉伸破坏宽高比
错误写法：img { width: 100%; height: 300px; } → 变形
正确约束：img { max-width: 90vw; max-height: 80vh; width: auto; height: auto; }
媒体查询切换对齐方式，别重复定义图片尺寸
响应式对齐的核心是“按断点切换父容器行为”，不是反复重写 img 样式。图片尺寸约束只需一次写清，对齐由父容器控制：
- 小屏居中：
@media (max-width: 768px) { .img-container { text-align: center; } } - 中屏左对齐：
@media (min-width: 769px) and (max-width: 1024px) { .img-container { text-align: left; } } - 若用 flex，则改
justify-content: flex-start/flex-end/center
最常被忽略的是：所有断点都复用同一套图片尺寸规则（max-width + height: auto），而不是每个 @media 里再写一遍 img { width: 100% } —— 这既冗余又容易冲突。
