最可靠、最现代的方案是display: flex + align-items: center，但必须确保父容器已启用flex布局、有明确高度（如min-height: 100vh）、子元素未脱离文档流，三者缺一不可；margin: 0 auto仅水平生效，垂直方向浏览器直接忽略auto。
图片在容器内垂直居中，最可靠、最现代的方案是 display: flex + align-items: center，但必须确保父容器有明确高度且已启用 flex 布局——漏掉任一条件，代码就等于没写。
为什么 margin: 0 auto 对垂直居中完全无效
这个写法只作用于水平方向，浏览器根本不会计算“上下 margin auto”，它只对块级元素的左右外边距生效。很多人误以为加了 margin: 0 auto 就能上下居中，结果发现毫无反应。
-
margin: 0 auto是为了解决“左右剩余空间平分”，不是为垂直设计的 - 即使给
img加了display: block和width，也依然不能触发垂直居中逻辑 - 若同时用了
display: flex父容器，margin: auto还可能干扰align-items行为（尤其在 Safari 中）
flex 布局垂直居中必须满足的三个硬条件
写了 align-items: center 却不生效？大概率卡在这三点上：
- 父容器没设
display: flex——align-items对非 flex 容器完全无意义 - 父容器高度塌陷：比如只写了
width，没设height或min-height，内部又没内容撑开，导致交叉轴长度为 0，“center”无从计算 - 子元素用了
position: absolute或float—— 这些会让元素脱离文档流，flex 的对齐规则直接失效
正确示例：
<div style="display: flex; align-items: center; justify-content: center; min-height: 300px;">@@##@@</div>
position: absolute + transform 的真实限制
这个组合兼容性好（IE9+），但不是“写完就稳”，容易忽略定位上下文和动态尺寸问题：
- 父容器必须有
position: relative（或absolute/fixed），否则top: 50%会相对于 viewport 计算，滚动时图片位置飘移 -
transform: translateY(-50%)必须和top: 50%配合使用；单写transform不起作用 - 图片宽高未加载完成时（如懒加载、字体未就绪），会出现短暂“顶部闪动”——可提前设
min-height或用aspect-ratio缓解
典型写法：
<div style="position: relative; height: 300px;">@@##@@</div>
别碰 line-height + vertical-align 的老方案
这个方法表面简单，实际脆弱得离谱：
- 要求父容器高度与
line-height完全一致，稍有偏差就偏移 -
img必须是行内元素，一旦加了display: block或float，立刻失效 - 父容器若设了
font-size: 0（常见于清除 inline 间隙），图片可能消失或错位 - 多图混排、响应式缩放时，
line-height很难同步调整，维护成本高
除非你锁定固定尺寸、纯静态页面、且必须兼容 IE7，否则没必要用。
真正容易被忽略的是：**垂直居中不是图片自己的事，而是父容器的布局责任**。无论选哪种方案，第一步永远是检查父容器是否具备必要约束——高度、定位上下文、display 类型。写一堆子元素样式却不管父容器，是绝大多数“居中失败”的根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
