不能在浮动元素上使用 vertical-align 实现垂直居中，因其脱离文档流、不参与行内格式化上下文；应改用 flex 布局（display: flex + align-items: center）或 table-cell 方案（需固定高度），避免无效补丁。
vertical-align 对 float 元素无效，且父容器高度常因浮动塌陷而不可靠——所以别试图在浮动体系内“垂直居中”，直接换布局模型。
为什么不能在 float 元素上直接 vertical-align
vertical-align 只对 inline、inline-block、table-cell 等行内上下文中的元素生效；float 会让元素脱离文档流并生成 BFC，彻底脱离行内格式化上下文。你给一个 float: left 的 div 设置 vertical-align: middle，浏览器会默默忽略它。
用 display: flex 替代 float 布局（推荐）
把原本靠 float 并排的子元素，改用 display: flex 管理，同时解决水平排列 + 垂直居中两个问题：
- 父容器加
display: flex、align-items: center即可让所有直系子元素垂直居中 - 水平分布用
justify-content控制：flex-start（默认，左对齐）、space-between、center等 - 若子元素需自适应宽度或换行，加
flex-wrap: wrap - 注意 IE11 在“内容未撑高”的 flex 容器中，
align-items: center可能失效，建议显式设置min-height或用height: 100%配合父级高度约束
用 display: table-cell 临时兼容老项目
适用于无法改动 HTML 结构、又必须支持 IE9+ 的场景：
- 父容器设
display: table、width: 100%、height: 200px（必须有明确高度） - 子元素设
display: table-cell、vertical-align: middle、text-align: center（后者管水平） - 该方案不兼容
float子元素——一旦子元素自己设了float，display: table-cell就会被降级为block，垂直居中失效 - 表格布局对响应式不友好，多列时宽度计算僵硬，仅作兜底
清除浮动后仍无法垂直居中的常见误操作
很多人以为“清完浮动，父容器有高度了，就能用其他垂直居中法”，但实际容易踩这些坑：
- 只用了
clear: both清浮动，但父容器没设height或min-height，导致position: absolute+top: 50%没参考基准 - 尝试
line-height居中，却套在块级子元素上（line-height只对行内内容起作用） - 用
transform: translateY(-50%)时忘了配top: 50%，或忘了加position: relative/absolute - Flex 方案里漏写了
align-items: center，只写了justify-content: center，结果只有水平居中
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
