使用 line-height 属性可实现浮动布局中单行文字垂直居中，适用于固定高度的容器；通过设置 line-height 等于容器高度，使文字在垂直方向居中，常用于导航栏或按钮；需注意仅适用于单行文本，且 line-height 与 height 值必须一致，字体大小不宜过大，避免跨浏览器差异影响效果。
在浮动布局中让文字垂直居中，最常用且有效的方法是使用 line-height 属性。这种方法适用于单行文本，尤其在导航栏、按钮或固定高度的容器中非常实用。
line-height 的基本原理
当一个块级元素设置了固定高度（height），并且内部只有一行文字时，可以通过设置 line-height 等于该元素的高度，使文字在垂直方向上居中。
例如：一个高度为 40px 的 div，设置 line-height: 40px; 文字就会垂直居中。
注意：line-height 对多行文本或 display: flex/block 布局中的复杂结构不适用。结合浮动布局的实际应用
在传统浮动布局中，常用于水平排列的导航项或工具条。每个浮动元素有固定高度，文字需垂直居中显示。
立即学习“前端免费学习笔记（深入）”；
示例代码：
首页关于
这里每个 div 浮动左对齐，高度和行高一致，文字自然垂直居中。
注意事项与常见问题
使用 line-height 实现垂直居中有几个关键点需要注意：
- 必须是单行文本，多行会破坏效果
- line-height 数值要与容器 height 完全匹配
- 字体大小不宜过大，避免视觉上偏移
- 不同浏览器默认 font-size 和 line-height 可能有差异，建议重置样式
替代方案简要说明
如果内容可能变为多行，或需要更灵活的布局，可考虑以下方法：
- 使用 padding 上下均等撑开容器（适合不定高）
- 父元素设置 display: table-cell 和 vertical-align: middle
- 现代布局推荐使用 Flexbox（justify-content: center）
但在简单、轻量的浮动场景中，line-height 依然是最快最直接的选择。
