display: flex; justify-content: center; align-items: center; 能实现精准二维居中，因前者建立弹性上下文，后两者分别控制主轴与交叉轴居中；而 margin: auto 仅对块级元素水平有效，垂直无效且依赖父容器明确高度。
直接用 display: flex + justify-content: center + align-items: center，再配 height: 100vh 和 max-width: 100%，就能稳稳实现响应式图片上下左右居中。其他方案要么漏垂直、要么破响应、要么兼容性翻车。
为什么不能只靠 margin: 0 auto
margin: 0 auto 只管水平，对垂直方向完全没作用；而且它要求图片是 display: block + 有明确宽度（比如 width: 300px），一旦加了 max-width: 100% 或用视口单位，就可能失效。更关键的是：父容器若没设高度，垂直方向根本无从“居中”可言。
- 常见错误：给
<img>单独加margin: auto→ 浏览器忽略，因为img默认是 inline 元素，margin: auto对它不生效 - 父容器用了
float、position: absolute或display: inline-block→ 容器高度塌陷，align-items或垂直居中逻辑直接失效 - 想用
text-align: center搞二维居中 → 它只影响水平，垂直方向得额外靠line-height、padding或嵌套容器，一换屏幕尺寸就错位
flex 居中必须配 height: 100vh 吗
不一定非用 100vh，但父容器**必须有明确高度**，否则 align-items: center 没参考基准。实际项目中常用这些替代：
-
min-height: 100vh：防止内容少时页面过短，同时允许内容撑高 - 固定高度如
height: 400px：适合 banner 区域等有设计约束的场景 - 用
vh配合媒体查询：@media (max-width: 768px) { .hero { height: 80vh; } }，避免小屏上图片被拉太高 - 绝对不要留空高度（比如只写
display: flex不设 height）→ 垂直居中会退化成贴顶
图片本身要加哪些样式才真响应
光靠父容器 flex 居中还不够，图片若不加约束，缩放时可能溢出、拉伸或模糊。关键三行：
-
max-width: 100%：防止宽屏下图片撑爆容器 -
height: auto：保持原始宽高比，避免变形 - 可选
width: 100%或max-width: 90vw：前者强制填满父宽（适合全宽图），后者留边距更安全（推荐）
别碰 width + height 同时固定——那会锁死比例，响应式就废了。
IE11 等老浏览器 fallback 怎么做
Flex 在 IE11 支持有限（比如 align-items: center 对某些 flex 容器不生效），如果必须兼容，可用双层结构：
- 外层
text-align: center+line-height: 100vh（配合vertical-align: middle）勉强保水平+近似垂直 - 内层再套一个
display: inline-block容器，设vertical-align: middle和显式height - 但更现实的做法是：现代项目直接放弃 IE11，用
@supports (display: flex)做渐进增强，老浏览器降级为仅水平居中
真正难搞的不是代码怎么写，而是忘记检查父容器是否被其他样式（比如 overflow: hidden、transform 触发新层叠上下文）悄悄干扰了 flex 行为——这种问题往往要 inspect 到第三层 DOM 才能发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
