响应式图片水平垂直居中核心在于父容器：设display: flex、justify-content: center、align-items: center和min-height: 100vh，图片配max-width: 100%、height: auto。
响应式图片要水平垂直居中，核心不是调图片本身，而是控制它所在的容器如何响应视口变化并提供稳定居中上下文。 单靠 width: 100% 或 text-align: center 都会失效——前者不解决垂直，后者在 flex/grid 容器里直接被忽略。
用 display: flex 实现真正响应式双向居中
这是当前最可靠、代码最少、天然适配缩放的方案，但必须写对位置和条件。
- 样式必须加在 父容器 上，不是
<img>标签上；只写justify-content: center不起作用，align-items: center缺一不可 - 父容器需有明确高度上下文：用
height: 100vh（占满视口）或min-height: 100vh（内容多时自适应），不能依赖内容撑高 - 图片自身设
max-width: 100%和height: auto，否则缩放时可能溢出或拉伸变形 - 旧版 Android（4.4 及以下）需补
display: -webkit-flex，但 2026 年绝大多数项目可忽略
示例：
<div style="display: flex; justify-content: center; align-items: center; min-height: 100vh;"><br> <img src="hero.jpg" alt="响应式主图" style="max-width: 100%; height: auto;"><br></div>
margin: 0 auto 只能水平居中，别误用为双向方案
这个写法常被拿来“凑数”，但它对垂直方向完全无效，且极易因配置错误彻底失效。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 必须配合
display: block和明确宽度（如width: 600px或max-width: 80vw），否则auto没参照，浏览器无法计算左右边距 - 父容器不能是
display: flex或display: grid，否则会覆盖块级居中逻辑 - 若图片需随窗口缩放，
width不能写死像素值，得用max-width+height: auto组合，但此时margin: 0 auto仍只管水平 - 垂直方向只能靠额外手段补：比如父容器加
padding-top、或外层再套一层 flex 容器
表格单元格里图片垂直居中容易踩的坑
还在用 <td valign="middle">？这个属性早已废弃，现代浏览器根本不解析。真正生效的是 CSS 的 vertical-align，但它有严格前提。
-
vertical-align: middle只对display: table-cell或内联级元素有效；如果<td>里嵌了<div>或图片设了display: block，立刻失效 -
<td>必须有明确高度（如height: 120px），不能靠图片撑开，否则“居中”无从谈起 - 响应式场景下，固定
height在小屏会裁剪图片；更稳妥的做法是改用min-height+display: flex替代整个<td> - IE9 及更早版本不支持 flex，如需兼容，只能退回到
line-height匹配单元格高度的 hack 方式
为什么 text-align: center 有时看起来“失效”？
它其实没失效，只是你没意识到它的作用域和限制条件。
- 这个样式必须写在 父容器 上，写在
<img>标签上毫无意义 - 仅对行内/行内块元素起作用：默认
<img>是inline，但如果加了display: block或float，它就脱离了行内流，text-align失效 - 父容器若用了
font-size: 0（常见于清除 inline 元素间隙），图片可能被压缩到看不见，或错位到顶部 - 在
display: flex或display: grid的父容器中，text-align被完全忽略——布局引擎已接管对齐逻辑
真正难的不是选哪种方法，而是判断当前 HTML 结构属于哪一类上下文：是独立全屏展示？嵌在表格里？还是混排在文字段落中？选错上下文，再多次 vertical-align: middle 也没用。
