图片在容器内垂直居中需用flex、绝对定位+transform或table-cell三种方法；flex失效主因是父容器未设display: flex、高度塌陷或子元素脱离文档流；absolute+transform需父容器设position: relative且配全top: 50%与transform；table-cell须将vertical-align: middle设在td上而非img上。
图片在容器内垂直居中，margin: 0 auto完全无效——它只管左右，浏览器压根不计算上下 auto；真正能稳住的，只有三种明确可控的路径：flex、绝对定位+transform、表格单元格（table-cell）。
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;"><img src="icon.png"></div>
absolute + transform 的坑：定位上下文和尺寸抖动
这个组合兼容性好（IE9+），但不是“写完就稳”，容易翻车在：
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
position: relative——top: 50%会相对于 viewport 计算，滚动时图片飘移 - 只写
transform: translateY(-50%)不配top: 50%，不起作用 - 图片宽高未加载完成（如懒加载、字体未就绪），会出现短暂“顶部闪动”——可提前加
min-height或用aspect-ratio缓解
典型写法：
<div style="position: relative; height: 300px;"><img src="logo.png" style="position: absolute; top: 50%; transform: translateY(-50%);"></div>
表格单元格（table-cell）还能用吗？慎用但有时最省事
vertical-align: middle 在 <td> 上天然生效，但注意：
- 它对行内内容起作用，所以必须设在
<td>上，而不是<img>自身（<td style="vertical-align: middle"><img></td>） - 若单元格高度由内容撑开，
vertical-align: middle可能视觉上不精准；更可靠的是显式设height+vertical-align: middle - 别把
vertical-align和text-align混用在同一层级——text-align控制水平，必须作用于<td>；vertical-align控制垂直，也必须作用于<td>，两者不冲突但对象不能错
错误写法：<img style="vertical-align: middle">（单独加在 img 上，基本无效）
真正麻烦的从来不是“怎么写”，而是“为什么写了没效果”——绝大多数问题出在父容器的高度缺失、定位上下文错位、或子元素意外脱离文档流。这些地方一漏，再标准的代码也等于白写。
