Float 元素无法用 align-items: center 垂直居中，因其脱离文档流且不参与 flex 布局；应改用 display: flex 配合 align-items: center 和 justify-content 实现左右并排与垂直居中。
float 元素无法用 align-items center 垂直居中
因为 align-items: center 是 Flexbox 的属性，只对 Flex 容器的**直接子元素**生效；而 float 会把元素脱离文档流，它既不响应父容器的 Flex 布局，也不参与 align-items 的对齐计算。强行在浮动元素上写 align-items 完全无效。
用 display: flex 替代 float 是最干净的解法
现代布局中，float 已基本被 flex 或 grid 取代。左右并排 + 垂直居中，用 Flex 一行代码就能搞定：
.container { display: flex; align-items: center; justify-content: space-between; /* 或 flex-start / space-around */ }此时左右两个子元素（比如
和
）会自动水平分布、垂直居中。无需 float，也无需清除浮动。
-
justify-content: space-between —— 左右贴边，中间留空
-
justify-content: flex-start —— 都靠左，可用 margin-left: auto 推右元素
- 若需兼容 IE10+，注意加
-ms-flex-align: center（但 IE 不支持 space-between 的完整行为）
如果必须保留 float，只能靠 line-height 或 transform 模拟居中
这是退路方案，适用于老项目无法改结构或需兼容极旧浏览器。核心思路是：让行内级内容（如文字、行内块）在父容器中视觉居中。
立即学习“前端免费学习笔记（深入）”；
- 父容器设固定高度 +
line-height 等于高度 → 仅对单行文本有效
- 浮动元素自身设
transform: translateY(-50%) + top: 50% → 需要 position: relative 或 absolute
- 用
vertical-align: middle 配合 display: inline-block → 但会受换行/空白符影响，不稳定
例如：
.float-wrapper { height: 60px; line-height: 60px; /* 文本类内容可居中 */ } .left { float: left; } .right { float: right; }
别忘了清除浮动带来的布局塌陷问题
即使你坚持用 float，只要父容器没高度，它就会塌陷——这时 align-items 再怎么写也没意义，因为容器高度为 0。常见修复方式有：
- 父容器加
overflow: hidden（简单但可能截断阴影/下拉菜单）
- 末尾加清浮元素：
- 用伪元素清除：
::after { content:""; display:table; clear:both; }
这些操作只是让父容器“撑开”，并不解决垂直居中本身——那还得靠上面提到的 line-height 或 transform。
真正省心的做法，还是放弃 float，拥抱 display: flex。那些“必须兼容 IE8”的场景，现在已极少需要主动考虑。