vertical-align 仅对行内元素和 table-cell 元素生效，非块级容器居中方案；其“middle”指对齐父元素小写字母 x 的中线，依赖 line-height 和字体上下文，现代布局应优先使用 flexbox 或 grid。
vertical-align 只对行内元素和 table-cell 生效
它根本不是为“块级容器内居中”设计的。给 div 或 img 直接加 vertical-align: middle 无效，除非该元素是 inline 或 inline-block，且父容器提供了可对齐的上下文（比如有足够高的 line-height，或自身是 table-cell）。
常见错误现象：
- 在普通
div里给img设置vertical-align: middle，图片纹丝不动 - 给父
div加vertical-align，完全没效果（因为div默认是块级，该属性不作用于块级元素）
真正起效的场景只有两类：
-
img、span等行内元素在同一行内与其他行内元素对齐（如图文混排） - 父元素设为
display: table-cell，此时vertical-align才能控制子内容在单元格内的垂直位置
line-height 是 vertical-align: middle 起效的关键前提
当 img 是 inline 元素时，vertical-align: middle 实际是让图片中点对齐父元素“小写字母 x 的中线”，而这条中线的位置由 line-height 决定——不是由父容器高度决定。
如果父容器没设 line-height，浏览器按默认字体大小生成行高（通常约 1.2em），远小于容器高度，vertical-align 就只能在这一小段空间里“微调”，看起来毫无居中效果。
实操建议：
- 确保
img是inline或inline-block - 给父容器显式设置
line-height，值等于容器高度（例如line-height: 200px） - 配合
vertical-align: middle才能真正让图片在行框内垂直居中
注意：line-height 设得过大可能撑开父容器，尤其当父容器有 overflow: hidden 时会裁剪内容。
现代布局下 vertical-align 已非首选方案
Flexbox 和 Grid 提供了语义清晰、行为确定的垂直居中能力，而 vertical-align 的行为高度依赖行内格式化上下文（IFC），容易受字体、行高、基线等隐式因素干扰。
推荐替代方案：
- 单个子元素：父容器加
display: flex+align-items: center - 已用 Grid 布局：父容器加
place-items: center - 需兼容 IE10+：绝对定位 +
top: 50%+transform: translateY(-50%)
这些方案不依赖行高、不关心基线、不区分 inline/block，直接作用于布局轴心，可控性强得多。
vertical-align: middle 的“middle”到底对齐谁？
它不是对齐父容器中间，而是对齐“父元素小写字母 x 的中线”。这个中线位置由 font-size 和 line-height 共同决定，且只存在于行内上下文中。
这意味着：
- 如果父容器没有文本，
font-size为 0，那根本不存在“x 中线”，vertical-align: middle就失去参照基准 - 如果父容器里混有不同字号的文字，
line-height会以最大字号为准，但“x 中线”仍以当前行内元素的font-size计算，导致对齐错乱 - 多个
vertical-align元素之间会相互影响——一个设top，另一个设middle，它们的相对位置就不再是简单居中
真正容易被忽略的是：它从来就不是“居中工具”，而是一个“行内对齐调节器”。想靠它做容器级垂直居中，相当于用螺丝刀拧螺母——不是不能转，只是设计目的就不匹配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
