图片垂直居中需据容器类型选择方案：行内元素用line-height+vertical-align:middle；块级容器用flex布局align-items:center；混合场景可用inline-flex，避免line-height与flex混用。
图片在行内元素中无法垂直居中，常见原因是默认的 vertical-align: baseline 导致图文底部对齐，而不是视觉居中。用 line-height 配合 flex 是一种灵活又兼容性不错的解法，关键在于分清适用场景和限制条件。
line-height 仅适用于单行内联图片
当图片放在一个有固定高度的容器（如 或 ）里，且该容器是行内元素时，可设 line-height 等于容器高度，并让图片 vertical-align: middle：
- 容器需设置明确高度（如
height: 40px） -
line-height: 40px让文字行高撑满容器 - 图片加
vertical-align: middle，会相对于这行文字的基线+半行高的位置对齐 - 注意：图片必须是
inline或inline-block，不能是block
flex 布局更适合块级容器中的图片居中
如果图片在 比如导航栏中带图标的文字链接，既想图标和文字垂直居中，又希望整个链接可点击区域统一： 立即学习“前端免费学习笔记（深入）”； 基本上就这些。line-height 是老办法，适合轻量、纯文本环境；flex 是现代首选，结构清晰、控制力强。两者不冲突，但别叠在一起乱用。
display: flex; align-items: center; justify-content: center;
vertical-align，也不依赖 line-height
flex-direction）min-height 或视口单位（如 min-height: 100vh）确保有空间line-height + flex 混合使用的典型场景
设为 display: inline-flex; align-items: center;
height: 1em 或 max-height: 1.2em 自适应字体大小line-height 和 flex 在同一元素上——易造成行高干扰 flex 对齐flex-shrink: 0 防止被压缩
