最稳方案是display: flex+justify-content: center+align-items: center，但父容器须设height（如100vh），图片须加max-width: 100%和height: auto，否则小图悬空、大图溢出、窄屏错位。
直接用 display: flex + justify-content: center + align-items: center 是最稳的方案，但必须确保父容器有明确高度，且图片加了 max-width: 100% 和 height: auto；否则小图会悬空、大图会溢出、窄屏下可能错位。
父容器必须设 height，不能靠内容撑开
很多人只写 display: flex; justify-content: center; align-items: center，结果图片水平居中了，垂直却贴顶——因为 align-items: center 需要可用空间。父容器若没设高度，它就按图片自身高度收缩，没有“中间”可居。
- 推荐用
height: 100vh（全视口高），适合封面图、登录页背景图这类占满屏幕的场景 - 若只需局部居中（比如卡片内一张图），改用
min-height: 200px或具体像素值，避免在极窄屏下拉得太长 - 别在
上直接加display: flex，否则所有直系子元素（如多个<p></p>）都会变成 flex item，布局全乱
img 必须加 max-width: 100% 和 height: auto
不加这两条，响应式就失效：大图在手机上会横向滚动，小图在桌面端会被拉伸变形，或者因固有尺寸太小而被 align-items: center 拉到顶部留大片空白。
-
max-width: 100%确保图片宽度不超过父容器，是防溢出的关键 -
height: auto保持宽高比，避免压缩或拉伸；不要写height: 100%，那会强制等高、破坏比例 - 如果想限制最大宽度（比如留边距），可用
max-width: 90vw，比100%更安全
兼容旧 Android 或 IE？换用 text-align: center + 块级转换
Flex 在 Android 4.4 及更早版本需要 -webkit- 前缀，而 IE10/11 对 align-items: center 支持不稳定。真要保这些老环境，退回更保守的组合。
- 给父容器设
text-align: center，图片保持默认inline行为即可水平居中 - 若图片被
<a></a>包裹，或你写了display: block，那必须补上margin: 0 auto，且图片得有明确宽度（固有尺寸也算） - 这个方案完全不管垂直方向，垂直居中得靠父容器加
padding-top或外层再套一层 flex 容器
媒体查询切换对齐方式时，只改父容器样式
响应式不是给每张图重复写尺寸，而是按断点切换父容器的对齐逻辑。常见错误是每个媒体查询里都重写 img { width: 100% }，这既冗余又容易冲突。
- 小屏居中：
@media (max-width: 768px) { .img-wrap { text-align: center; } } - 中屏左对齐：
@media (min-width: 769px) and (max-width: 1024px) { .img-wrap { text-align: left; } } - 若用 flex 布局，对应改
justify-content即可，例如justify-content: flex-start
真正容易被忽略的是：图片本身几乎不需要写媒体查询，所有响应逻辑都该收束在容器层。一旦开始给 <img> 加 @media，说明结构已经失衡了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
