vertical-align 对 float 元素无效，因其脱离行盒；应改用 flex 布局，设父容器 display: flex、align-items: center、justify-content: space-between，并清除子元素 float；若必须保留 float，可尝试 line-height 匹配高度或绝对定位 + transform。
vertical-align 对 float 元素完全无效
给 .logo { float: left; vertical-align: middle; } 或 .search { float: right; vertical-align: middle; } 加上 vertical-align 没有任何视觉变化——这不是写错，而是 CSS 规范决定的。vertical-align 只对 inline、inline-block、table-cell 生效；而 float 会让元素脱离行内上下文、生成独立 BFC，彻底退出行盒（line box）参与，所以它根本“看不见”父容器的 line-height 或 vertical-align。
用 flex 替代 float 是最直接有效的解法
不要试图“修复”浮动居中，而是换掉浮动本身。把包含 logo 和 search 的外层容器设为 display: flex，再用 align-items: center 就能天然垂直居中，无需 hack。
- 父容器必须有明确高度（如
height: 60px或min-height），否则align-items缺少参照基准 - 子元素要显式清除浮动：
float: none，否则可能意外触发 BFC 导致 flex 排列异常 - 左右对齐用
justify-content: space-between（logo 左、search 右），或用margin-left: auto推 search 到右侧 - IE10+ 原生支持，2026 年绝大多数项目已无需兼容 IE9 及以下
.header {
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
}
.logo, .search {
float: none; /* 关键：必须清除原有 float */
}
如果必须保留 float（如 CMS 主题强约束）
只能靠父容器的 line-height + 单行文本内容模拟对齐，适用场景极窄：
- 仅适用于 logo 和 search 都是单行内容（比如纯文字或固定尺寸图标）
- 父容器需设固定
height且与line-height完全一致（如height: 48px; line-height: 48px;） - logo 和 search 必须是内联级元素（
<img>或<span></span>），不能包在<div> 里，否则 <code>line-height不生效 - 若 search 是表单控件（如
<input>），需额外设vertical-align: middle并配合margin微调，不同浏览器渲染差异明显 - 父容器加
position: relative - logo 设
position: absolute; top: 50%; transform: translateY(-50%); left: 0; - search 设
position: absolute; top: 50%; transform: translateY(-50%); right: 0; - 注意：这会让元素彻底脱离文档流，后续兄弟元素可能上移，需额外占位或调整布局流
绝对定位 + transform 是最后兜底方案
当父容器无法改结构、又必须让两个浮动元素视觉上居中时，可放弃 float 行为，改用定位：
真正难处理的，是那些嵌在老旧 CMS 主题或 JS 插件里的 float 布局——它们往往没有修改权限，只能靠覆盖样式硬顶，此时 transform: translateY(-50%) 的容错率反而比 margin-top 负值高，但前提是父容器高度稳定。
