图片在容器内垂直居中需用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;">@@##@@</div>

absolute + transform 的坑：定位上下文和尺寸抖动

这个组合兼容性好（IE9+），但不是“写完就稳”，容易翻车在：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 父容器没设 position: relative —— top: 50% 会相对于 viewport 计算，滚动时图片飘移
• 只写 transform: translateY(-50%) 不配 top: 50%，不起作用
• 图片宽高未加载完成（如懒加载、字体未就绪），会出现短暂“顶部闪动”——可提前加 min-height 或用 aspect-ratio 缓解

典型写法：

<div style="position: relative; height: 300px;">@@##@@</div>

表格单元格（table-cell）还能用吗？慎用但有时最省事

vertical-align: middle 在 <td> 上天然生效，但注意： <ul><li>它对行内内容起作用，所以必须设在 <code><td> 上，而不是 <code><img src="icon.png"> 自身（<td style="max-width:90%"><img src="logo.png" style="max-width:90%"></td>）

若单元格高度由内容撑开，vertical-align: middle 可能视觉上不精准；更可靠的是显式设 height + vertical-align: middle

别把 vertical-align 和 text-align 混用在同一层级——text-align 控制水平，必须作用于 <td>；<code>vertical-align 控制垂直，也必须作用于 <td>，两者不冲突但对象不能错 <p>错误写法：<code><img>（单独加在 img 上，基本无效）

真正麻烦的从来不是“怎么写”，而是“为什么写了没效果”——绝大多数问题出在父容器的高度缺失、定位上下文错位、或子元素意外脱离文档流。这些地方一漏，再标准的代码也等于白写。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！