最可靠、最省心的方式是用 display: flex + align-items: center；父容器必须设明确高度，img 无需额外样式，现代浏览器全覆盖，IE10+ 支持，兼容性好且代码简洁。
图片在固定高度容器里垂直居中，最可靠、最省心的方式是用 display: flex + align-items: center，现代浏览器全覆盖，代码少、逻辑直，不需要猜基线、不纠结行高。
Flexbox 实现图片垂直居中（推荐首选）
这是当前项目中应默认采用的方式。父容器设为 flex，子元素（img）自动沿交叉轴居中，无需知道图片尺寸，也不受文本或空白符干扰。
关键点：
- 父容器必须有明确的
height，否则无法体现“垂直居中”效果 -
img本身不用加任何定位或对齐样式，max-width: 100%和max-height: 100%可防溢出 - IE10+ 支持完整，IE9 只支持带前缀的旧语法（
-ms-flex-align: center），如需兼容 IE9 可加前缀
示例：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
align-items: center;
justify-content: center; /* 顺便水平居中 */
height: 300px;
border: 1px solid #ddd;
}
.container img {
max-width: 100%;
max-height: 100%;
}vertical-align: middle 失效的常见原因
这个属性常被误用为“让图片在父容器里垂直居中”，但它实际作用对象是**行内上下文中的基线对齐**，不是容器几何中心。
典型失效场景：
- 父容器没设
line-height，或line-height不等于容器高度 - 父容器内存在文本或其他行内元素，拉偏了基线位置
-
img是inline元素，默认基线在底部，vertical-align: middle是让它中点对齐“x-height 的一半”，不是容器中点 - 父容器有换行、空格等空白节点，产生不可见行框干扰
若坚持用此法，需同步设置：font-size: 0（消灭空白符）、line-height: [容器高度]、img { display: inline-block }。
绝对定位 + transform(-50%, -50%) 适用场景
当父容器不能改 display 类型（比如已有复杂布局依赖 block 流），或需要兼容更老的浏览器（IE9+）时，这个组合依然有效。
注意细节：
- 父容器必须设
position: relative（或其它非static值） -
img设position: absolute; top: 50%; left: 50%，再用transform: translate(-50%, -50%)回拉自身宽高的一半 - 该方案对宽高未知的图片完全友好，但比 Flexbox 多写 4 行 CSS，且容易漏掉
transform导致偏移
示例：
立即学习“前端免费学习笔记（深入）”；
.container {
position: relative;
height: 300px;
}
.container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Grid 的 place-items: center 简洁替代方案
如果你的项目已使用 Grid 布局，或者父容器本身就是网格项，place-items: center 是比 Flexbox 更少代码的选择。
它等价于：align-items: center; justify-items: center，同时控制子项在二维空间中的居中。
兼容性略低于 Flexbox（IE 完全不支持，Edge 16+ 开始支持），但在现代项目中几乎无负担。
注意：place-items 对所有直接子元素生效，如果父容器下还有其他非图片子元素，需额外用 grid-area 或包装层隔离。
真正容易被忽略的是：几乎所有方案都依赖父容器有**确定的高度**。没有 height 或 min-height，垂直居中就失去参照系——这点比选哪种技术更重要。
