父容器需设 display: flex、min-height（如100vh）且图片加 max-width: 100% 和 height: auto 才能居中；justify-content 和 align-items 必须作用于父容器，图片自身无需额外对齐或 display: block。
直接给父容器加 display: flex、justify-content: center 和 align-items: center 就能实现，但三个条件缺一不可：父容器必须启用 Flex、有可分配的高度空间、图片不能脱离文档流。
父容器必须设 display: flex 且带高度约束
只在 <img> 上写样式没用，Flex 对齐行为完全由父容器控制。很多人写了 justify-content: center 却没效果，第一反应就是漏了这一步。
- 必须作用在包裹
<img>的<div>（或其他块级容器）上，不是图片自身 <li> <code>align-items: center垂直居中依赖交叉轴（通常是高度）有可用空间；若父容器没设height或min-height，它可能塌缩为 0，图片就卡在顶部甚至“消失” - 用
min-height: 100vh是全屏居中最常用写法，但别直接写在上——会把所有直系子元素都变 flex item，破坏原有结构 - 响应式关键：必须加
max-width: 100%+height: auto，否则大图会溢出或拉伸变形 - 别给图片设
margin: 0 auto——在 flex 容器里它被完全忽略 - 也别给图片写
justify-content或align-self（除非你真要单独调整某一张），这些属性只对 flex 容器生效 - Android 4.4 及以下系统需加
display: -webkit-flex前缀，仅 flex 容器本身需要，其他属性不用重复加 - iOS Safari 在某些 flex 嵌套场景下对
margin: auto有异常行为，建议彻底回避——如果父容器已是 flex，就别再往图片上加任何 margin 相关声明 - 若父容器用了
flex-direction: column，记得把justify-content和align-items的作用轴理解对：此时主轴是垂直方向，justify-content控制的是上下，align-items控制左右
<img> 自身只需响应式尺寸，无需额外对齐设置
Flex 项目会自动忽略原本的行内特性，所以图片保持默认 display: inline 完全没问题，加 display: block 属于冗余操作。
移动端和旧浏览器的兼容性注意点
绝大多数现代浏览器无问题，但两个历史坑仍需手动处理：
最容易被忽略的是父容器高度这个硬条件——它不显眼，但一旦缺失，align-items: center 就等于没写。写完检查三件事：父容器有没有 display: flex、有没有 min-height 或 height、图片有没有 max-width: 100% 和 height: auto。
