flex居中需同时满足父容器设display: flex、有明确高度、图片未脱离文档流；否则justify-content和align-items无效。
直接用 display: flex + justify-content: center + align-items: center，但必须确保父容器有明确高度、图片未脱离文档流，否则“居中”只是假象。
为什么写了 flex 却没居中？三个硬条件缺一不可
很多人复制了样式却看不到效果，问题几乎都出在以下任一环节：
- 父容器没设
display: flex—— 只给<img alt="HTML如何让响应式图片在页面正中居中" >加没用 - 父容器高度塌陷：比如只写了
width: 100%，没设height或min-height，导致align-items: center没空间可算 - 图片加了
position: absolute或float—— 元素已脱离文档流，flex 规则直接失效 - 父容器本身是
display: grid或display: inline-block—— 会覆盖 flex 行为
响应式图片尺寸控制：max-width 和 height:auto 是关键
仅居中还不够，图片缩放后不能溢出、变形或留白过大。核心是让图片自身适配容器，而不是靠容器去“猜”尺寸：
-
max-width: 100%必须加在<img alt="HTML如何让响应式图片在页面正中居中" >上，否则宽屏下会撑破容器 -
height: auto要同步设置，否则比例失真（尤其 SVG 或原始宽高比特殊的图） - 如需留边，可用
max-width: 90vw替代100%，避免贴边 - 慎用
width: 100%：它会强制拉伸，和响应式目标相悖
视口级居中推荐写法：100vh 容器 + flex
这是全屏居中最稳的组合，适合 banner、加载页、单图落地页等场景：
立即学习“前端免费学习笔记（深入）”；
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;"> <img src="photo.jpg" alt="响应式居中图" style="max-width:90%"> </div>
注意点：
-
height: 100vh是关键，提供垂直对齐所需的参照高度 - 不要把
display: flex直接加到上——它会让所有直系子元素（如多个<p></p>）变成 flex item，破坏原有结构 - 旧 Android（4.4 及以下）需加
display: -webkit-flex前缀，但当前已极少需要兼容
别被 text-align 或 margin:auto 带偏方向
这两个方法常被误用于“正中间”，但它们本质不支持垂直居中：
-
text-align: center只作用于父容器，且只管水平方向；若父容器没设高度或内容撑不开，垂直方向就是贴顶 -
margin: 0 auto要求display: block+ 明确宽度，但高度方向完全无效；加上display: block后，图片仍默认从顶部开始渲染 - 两者混用（比如父容器
text-align: center+ 图片margin: 0 auto）不仅冗余，还可能因 display 冲突导致意外行为
真正实现“正中”的难点不在代码多寡，而在于理解 flex 的对齐依赖容器尺寸上下文——一旦父容器高度不可知，align-items: center 就成了摆设。所以每次写完，先检查三件事：父容器是否 flex、是否有高度、图片是否还在文档流里。
