line-height 对浮动元素无效，因其脱离行框布局；浮动元素需用 padding/margin、绝对定位或改用 flex/grid 实现垂直居中，推荐 flex：display: flex; align-items: center。
浮动元素本身脱离文档流，无法直接通过 vertical-align 或 margin: auto 实现垂直居中，line-height 仅对行内内容（如文字、图片等）在单行行框内生效，对已 float 的块级元素无效。所以“用 line-height 让浮动元素垂直居中”是一个常见误解。
为什么 line-height 对浮动元素不起作用
浮动后的元素会变成块级框（block-level box），不再参与行框（inline formatting context）的布局。line-height 只影响行内内容在行框中的基线对齐，对浮动块的定位毫无影响。即使给浮动 div 设置 line-height，它自身高度不变，也不会被“撑”到父容器中间。
真正可行的垂直居中方案（浮动场景下）
若必须保留 float（例如老项目兼容需求），可通过以下方式间接实现视觉上的垂直居中：
- 父容器设置固定高度 + 使用 padding 或 margin 模拟居中：手动计算偏移量，适合高度可控的静态布局
- 结合 position: relative / absolute：给父容器设 relative，浮动子元素再加 position: absolute + top: 50% + transform: translateY(-50%) —— 此时 float 属性实际已失效，但可达成居中效果
- 放弃 float，改用更现代的布局方式：flex 或 grid 是目前最简洁可靠的垂直居中方案，推荐优先采用
推荐替代方案：用 Flex 替代 Float
只需两行 CSS 即可让子元素真正垂直+水平居中：
立即学习“前端免费学习笔记（深入）”；
父容器样式示例：display: flex;
align-items: center;
无需关心子元素是否块级、是否浮动，flex 容器会自动处理对齐。若还需水平居中，加上 justify-content: center 即可。
