display: table-cell 能让图片垂直居中，因其模拟表格单元格并原生支持 vertical-align: middle；需外层 display: table、中间 display: table-cell + vertical-align: middle，且 img 保持 inline 或 inline-block。
为什么 display: table-cell 能让图片垂直居中
因为 table-cell 模拟了 HTML 表格单元格的行为，天然支持 vertical-align 属性。只要父容器设为 display: table-cell 并配合 vertical-align: middle，内部的替换元素（比如 <img>）就会按基线规则对齐到中间——这不是靠 JS 或 flex 计算出来的，而是浏览器渲染引擎对表格模型的原生支持。
必须同时设置的三个关键样式
单独写 display: table-cell 是无效的，它依赖完整的“表格上下文”。常见错误是只改子容器，忘了父级结构：
-
display: table必须加在最外层容器上（相当于<table>） <li> <code>display: table-cell加在中间包裹层（相当于<td>） <li> <code>vertical-align: middle也加在该table-cell元素上
示例结构：
<div class="wrapper">
<div class="cell">
@@##@@
</div>
</div>
对应 CSS：
.wrapper { display: table; width: 100%; height: 200px; }
.cell { display: table-cell; vertical-align: middle; text-align: center; }
.cell img { max-height: 100%; max-width: 100%; }
vertical-align 对图片生效的前提条件
vertical-align 只对行内元素、表格单元格、以及 display: inline-block 元素起作用。如果图片被设成 display: block，vertical-align 就会失效——哪怕父级是 table-cell。
- 默认
<img src="logo.png" alt="logo">是inline元素，所以能响应vertical-align - 如果加了
display: block，需手动改回inline或inline-block - 若图片后有换行或空格，会产生空白节点，可能影响对齐精度；建议把
<img>写在一行内，或设font-size: 0在table-cell上消除间隙
比 table-cell 更现代的替代方案
虽然 table-cell 方案兼容 IE8+，但它强制改变了文档流语义，且无法响应式缩放内容区域。现在更推荐：
-
display: flex+align-items: center（IE10+，需加前缀） -
display: grid+place-items: center（Chrome 66+/Firefox 63+） - 纯 CSS 的绝对定位 +
transform: translate(-50%, -50%)（兼容性最好，但需已知宽高或用max-width/max-height控制）
如果项目必须支持 IE9 及以下，table-cell 仍是稳妥选择；否则优先考虑 flex —— 它更直观、可维护性更高，也不用嵌套两层容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
