浮动元素不支持 vertical-align，因其脱离行内格式化上下文（ifc）；应改用 display: flex + align-items: center 实现垂直居中，但需确保父容器有交叉轴尺寸约束且子元素不设 float。
浮动元素本身不支持垂直居中，vertical-align 对它完全无效 —— 不是写法不对，是浏览器根本忽略这条声明。
为什么 vertical-align 在浮动元素上没反应
浮动（float: left 或 float: right）会让元素脱离文档流、创建 BFC，彻底退出行内格式化上下文（IFC）。而 vertical-align 只对处于 IFC 中的元素（如 inline、inline-block、table-cell）起作用。你给一个 float 元素加 vertical-align: middle，CSS 引擎会静默丢弃，控制台也不会报错。
- 常见错误现象：
.item { float: left; vertical-align: middle; }写了等于没写 - 误以为“清完浮动父容器有高度了就能居中”，但清除浮动（
clear: both）只解决塌陷，不恢复 IFC 上下文 - 试图用
line-height拉高父容器去“挤”浮动子元素，结果子元素因脱离流而无视line-height
改用 display: table-cell 的前提和限制
这个方案适合必须兼容 IE9+ 且 HTML 结构无法调整的老项目，但它有硬性依赖：父容器必须有**明确高度**，且子元素不能自己设 float。
- 父容器需设
display: table、height（或min-height），不能靠内容撑开 - 子元素设
display: table-cell、vertical-align: middle、text-align: center（后者管水平） - 一旦子元素写了
float: left，display: table-cell就会被浏览器降级为block，垂直居中立即失效 - 响应式场景下宽度计算僵硬，多列布局时容易溢出或换行异常
用 display: flex 替代浮动是最直接有效的解法
现代项目应直接放弃浮动做布局，flex 不仅解决垂直居中，还天然规避塌陷、无需清除、支持响应式换行。
- 父容器加
display: flex+align-items: center即可让所有直系子元素垂直居中 - 若子元素原本靠
float: left水平排列，现在用justify-content: flex-start（默认）或space-between替代 - IE11 下注意：如果父容器没有显式高度约束（比如只靠内容撑开），
align-items: center可能不生效，建议加min-height: 200px或height: 100%配合祖先高度 - 不要混用：
flex容器里的子元素再设float，会导致该子元素脱离 flex 布局，align-items对它失效
容易被忽略的关键点
很多人试过 flex 仍失败，往往卡在两个细节：一是父容器缺少交叉轴尺寸约束（比如没设 height 或 min-height），二是子元素自己保留了 float 声明 —— 这两条任意一条存在，都会让 align-items: center 形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
