最直接有效的居中方案是 display: flex + justify-content: center + align-items: center，但需父容器有明确高度（如 min-height: 100vh）、设 display: flex，且图片用 max-width: 90vw + height: auto；margin: 0 auto 单独作用于 img 无效因其默认 inline，加 display: block 后若配 max-width: 100% 则 margin 归零，且仅水平居中，垂直仍需额外处理。
用 display: flex + justify-content: center + align-items: center 是最直接有效的方案，但必须配合父容器高度约束和图片自身尺寸限制，否则在窄屏或大图下会溢出、偏移或垂直错位。
为什么 margin: 0 auto 单独写在 <img> 上无效
因为 <img> 默认是 inline 元素，margin: auto 对它完全不生效。即使加了 display: block，若同时设了 max-width: 100%，浏览器会认为“宽度已占满”，左右 margin 自动归零。
- 必须显式写
display: block，且确保父容器有明确宽度上下文（比如max-width: 1200px; margin: 0 auto） - 如果父容器用了
float、position: absolute或display: flex，margin: auto会被接管或忽略 - 它只解决水平居中；垂直方向仍贴顶，需额外处理（如
padding-top或外层 flex）
flex 居中必须配对的三个条件
只写 justify-content: center 是常见错误——它只能水平居中，align-items: center 才管垂直，而两者都依赖父容器有可计算的高度空间。
- 父容器必须设
display: flex，不能只加在<img>上 - 必须同时声明
justify-content: center和align-items: center，缺一不可 - 父容器高度不能塌陷：用
min-height: 100vh比height: 100vh更安全，避免内容超长时滚动条卡住图片 -
<img>自身只需max-width: 90vw+height: auto，不用设固定width或height
图片缩放后偏移或跳动的隐藏原因
偏移往往不是居中逻辑错了，而是约束链断裂：父容器宽度没封顶、定位基准漂移、或多个居中方式叠加干扰。
立即学习“前端免费学习笔记（深入）”；
- 父容器若只写
width: 90%没设max-width，视口缩放时它的宽度波动，导致justify-content: center的参考区域晃动 - 混用
position: absolute+transform: translate(-50%, -50%)和 flex 布局，会造成坐标系统冲突，出现微跳 -
object-fit对普通<img>无效，别在<img>上写object-fit: contain—— 它只适用于<video>或带background-image的元素 - 避免在
body直接设display: flex，否则所有直系子元素（如多个<p>）都会变成 flex item，布局全乱
真正容易被忽略的是高度来源的稳定性：不是“有没有 height”，而是这个 height 是否由视口单位或最小约束提供。一旦父容器高度塌陷，align-items: center 就失去作用对象，图片看起来“居中失败”，其实只是没地方可居中。
