vertical-align 仅对行内格式化上下文（ifc）中的元素生效，如 inline、inline-block、table-cell；对 block 或 flex 容器无效，需改用 align-items、table-cell 或绝对定位等替代方案。
vertical-align 不是“让子元素在父容器里上下居中”的通用工具，它只对参与行内格式化上下文（IFC）的元素生效——比如 inline、inline-block、table-cell。直接给 div 或 flex 容器设 vertical-align: middle，完全没反应。
为什么 vertical-align 在 div 里不生效
常见错误是把 vertical-align: bottom 加在父 div 上，指望里面文字沉到底部。但 div 默认是 display: block，不参与 IFC，vertical-align 对它无效。
- 该属性作用对象必须是行内级元素本身（如
img、span、input），不是它的父块 - 父容器若为
block，需先让它“进入行内上下文”：比如设display: table-cell，再对自身设vertical-align - 若父容器是
flex，vertical-align彻底失效，得用align-items
vertical-align: bottom 在图片和表单控件上的正确用法
这是它最稳定、最常用的场景：解决 img、input、button 等默认 inline 元素的基线对齐留白问题。
-
img默认按 baseline 对齐，底部总有一条看不见的间隙；加vertical-align: bottom就能紧贴行框底边 -
input和label高度不一时，统一设vertical-align: middle比调margin更可靠 - 不要混用
float和vertical-align：浮动元素脱离文档流后，vertical-align失效 - 在表格单元格（
td）中，vertical-align原生支持，但注意框架样式可能覆盖它，必要时加!important
替代方案：什么时候该放弃 vertical-align
当你要对齐的是块级结构、多行文字、或需要像素级控制时，vertical-align 就不是第一选择了。
- 父容器高度固定且内容简单 → 用
display: table-cell+vertical-align: bottom - 要兼容现代浏览器、布局灵活 → 用
display: flex+align-items: flex-end（注意交叉轴方向） - 需要绝对位置控制或避开文档流影响 →
position: absolute+bottom: 0，但父容器必须有position: relative - 单图居底且不想写太多 CSS →
img { display: block; margin-top: auto; }配合flex-column父容器
真正容易被忽略的点是：同一个 vertical-align 值，在 table-cell 和 inline-block 中的参考基准不同；而一旦父容器用了 flex 或 grid，这个属性就彻底退场了——别硬套，换思路更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
