浮动元素脱离文档流导致父容器高度塌陷，vertical-align、margin: auto等居中方式全部失效；应改用flex、inline-block或absolute+transform等可控方案，并先清除浮动。
因为浮动元素脱离文档流，父容器在计算高度和对齐基准时根本“看不见”它们——不是居中失效，而是居中所需的参照系直接消失了。
vertical-align 对 float 元素完全无效
vertical-align 只作用于 inline、inline-block 和 table-cell 元素。float 会让元素生成 BFC 并退出行内格式化上下文（IFC），它既不在行盒里，也不参与父容器的垂直方向布局计算。
常见错误现象：.item { float: left; vertical-align: middle; } —— 浏览器会静默忽略该声明，无任何视觉变化。
即使给父容器设了 line-height: 60px，也只撑开文字行高，对已浮动的子元素位置毫无影响。
margin: auto 在浮动上下文中失去计算依据
块级元素的 margin: 0 auto 水平居中，依赖父容器有明确宽度且子元素处于常规流中。而浮动后：
- 父容器常因高度塌陷而 width 不可靠或未触发 BFC
- 子元素脱离流，不再被父容器的“可用宽度”约束
- 左右 margin 计算结果为 0，视觉上紧贴左上角
典型失败写法：.box { float: left; width: 200px; margin: 0 auto; } → 元素仍死贴左边缘。
父容器高度塌陷导致所有垂直对齐失效
浮动子元素脱离文档流后，父容器高度坍缩为 0（或仅由非浮动内容撑起）。此时：
-
align-items: center没有交叉轴高度可参照 -
top: 50%的计算基准变成 viewport 而非父容器 -
line-height或text-align对浮动子项内部文字的控制也断裂
这不是样式没写对，而是整个布局上下文已经崩坏——你试图在一张没有坐标的纸上标出“中间点”。
真正可行的替代路径
放弃在浮动体系内“打补丁”，转而用语义清晰、行为可控的方案：
- 多列并排 + 垂直居中：用
display: flex，父容器加align-items: center和明确height或min-height - 图标+文字同行居中：改用
display: inline-block+vertical-align: middle，父容器清浮动并设font-size: 0消除间隙 - 必须兼容老项目：用
position: absolute+transform: translate(-50%, -50%)，但前提是父容器有position: relative且高度可控
最关键的一点：所有有效方案都要求先清除浮动带来的高度塌陷，否则任何对齐操作都是空中楼阁——父容器连自己的“身高”都没有，谈何居中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
