图片垂直居中需据容器类型选择方案：行内元素用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 布局更适合块级容器中的图片居中

如果图片在 这类块级容器中，直接用 flex 更可靠、语义更清晰：

• 给父容器加 display: flex; align-items: center; justify-content: center;
• 图片无需额外设置 vertical-align，也不依赖 line-height
• 支持任意宽高比图片，也兼容多图或图文混排（配合 flex-direction）
• 若父容器高度不确定，可用 min-height 或视口单位（如 min-height: 100vh）确保有空间