设置line-height等于height可实现单行文本垂直居中，如height:40px;line-height:40px；多行文本时需避免溢出，宜用flexbox或padding调整；line-height具继承性，影响行间距，height仅限内容区高度，二者无直接计算关系，但共同影响布局视觉效果。
在CSS中，height 和 line-height 都能影响元素内容的垂直空间和对齐效果，尤其在处理文本垂直居中时经常被结合使用。理解它们的作用机制和相互关系，有助于更精准地控制布局。
height 与 line-height 的基本作用
height 定义了元素内容区域的高度（content box），不包括 padding、border 和 margin。而 line-height 控制的是文本行间的基线距离，也直接影响行内内容的垂直空间。
当一个块级元素只包含一行文本时，设置 line-height 等于 height，可以让文本在该区域内垂直居中。
实现单行文本垂直居中
这是最典型的结合用法。例如：
立即学习“前端免费学习笔记（深入）”；
<div class="center-text">居中文本</div>
对应CSS：
.center-text {
height: 40px;
line-height: 40px; /* 与height相同 */
text-align: center;
border: 1px solid #ddd;
}
此时，文本会严格垂直居中，因为行高撑满了整个内容高度，文字自然对齐到中间。
多行文本中的注意事项
如果文本有多行，直接让 line-height 等于 height 可能导致内容溢出或挤压。
- 多行情况下，总行高 = 行数 × line-height
- 若容器 height 小于总行高，会出现滚动或截断
- 此时更适合使用其他垂直居中方式，如 flexbox 或 padding 调整
例如，多行文本建议使用：
.multi-line {
height: 60px;
line-height: 20px; /* 合理行距 */
padding-top: 10px;
}
line-height 的继承与 height 的独立性
line-height 会被子元素继承，影响内部所有文本行；而 height 是块级容器自身的限制。两者无直接计算关系，但视觉上会共同决定内容的排布。
特别注意：如果设置了固定 height 但未控制 line-height，字体大小变化可能导致文本“贴顶”或“溢出”。
基本上就这些。合理搭配 height 和 line-height，能有效控制单行文本的垂直对齐，但在复杂场景下建议优先考虑现代布局方法如 Flexbox。
