必须用 Flex 布局：父容器设 display: flex、justify-content: center 和 align-items: center，并明确高度（如 height: 400px），图片用 max-width: 100% + height: auto 保持比例，且不能脱离文档流。
固定高度容器里图片居中，必须用 flex 布局
响应式图片在固定高度区域（比如 height: 400px 的 banner）里“正中间”显示，text-align: center 或 margin: 0 auto 都做不到垂直居中；唯一可靠路径是父容器启用 display: flex 并配齐三个条件。
常见错误现象：图片贴顶、上下留白不均、横屏时偏移、加载后跳动。
- 父容器必须设
display: flex—— 写在<img>上完全无效 - 必须同时写
justify-content: center（水平）和align-items: center（垂直） - 高度必须明确且不塌陷：用
height: 400px、min-height: 400px或height: 100%（前提是父级有高度）
示例：
<div style="display: flex; justify-content: center; align-items: center; height: 400px;"> <img src="hero.jpg" style="max-width: 100%; height: auto;"> </div>
图片自身不能脱离文档流，否则 flex 失效
align-items: center 只对文档流内的子元素起作用。一旦图片加了 position: absolute、float: left 或被包裹在 display: grid 容器里，flex 居中逻辑就直接跳过它。
使用场景：常出现在轮播图组件、卡片封面、模态框头图等需要尺寸约束又保持视觉居中的地方。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 检查是否误加了
position: absolute—— 这是最常见的“消失式居中失败”原因 - 避免给
<img>设display: block后再套margin: 0 auto：这会干扰 flex 的子项计算 - 如果父容器本身是
display: grid，别混用 flex 居中；统一用place-items: center
响应式缩放必须靠 max-width: 100% + height: auto
固定高度区域里，图片宽高比不确定，强行设 width: 100% 或 height: 100% 会导致拉伸或裁剪；max-width: 100% 才是安全上限，配合 height: auto 才能等比缩放。
性能影响：浏览器需根据原始尺寸实时计算高度，但现代设备无感知；若图片超大（如 5MB+），建议服务端生成适配尺寸。
- 只写
max-width: 100%不写height: auto→ 高度保留原始值，可能撑破容器 - 只写
height: auto不控宽 → 小屏下图片溢出，破坏居中视觉 - 想留边距？用
max-width: 90vw替代100%，避免宽屏边缘紧贴
IE 兼容或旧 Android 需补前缀，但别乱加
如果你的项目仍需支持 IE11 或 Android 4.4 以下系统，display: flex 必须加 -webkit- 前缀，但只加在需要的地方，不是所有 flex 属性都需补全。
容易踩的坑：复制整段“兼容写法”却漏掉关键属性，或给不需要的浏览器加冗余前缀拖慢解析。
- 只需补
display: -webkit-flex，justify-content和align-items在这些老版本中无需前缀 - Android 4.3 及以下不支持
align-items: center，可降级为align-items: baseline+padding-top模拟 - IE11 支持
place-items: center？不支持 —— grid 方案在此类场景下不可用
真正难处理的不是写法本身，而是当容器高度由 JS 动态计算（比如根据视口比例算出 height: calc(100vh * 0.6)）时，图片缩放与居中时机不同步——这时得监听 load 和 resize，手动触发重排。
