单行文字在固定高度容器中垂直居中的最直接方法是将line-height设为与height相等；需满足容器高度明确、内容单行（常配合white-space: nowrap）、避免padding/border等干扰。
让单行文字在固定高度容器中垂直居中，最直接有效的方法就是把 line-height 设为和容器的 height 相同。
原理很简单
对于单行文本，line-height 决定了这一行文字所在行框（line box）的高度。当容器高度固定、且内容只有一行时，只要行框高度等于容器高度，浏览器就会自动把文字在行框内垂直居中——而行框又恰好填满容器，视觉上文字就居中了。
关键要求必须满足
- 容器必须有明确的 height（不能是 auto 或由内容撑开）
- 文字必须是单行（不换行），所以通常要加 white-space: nowrap
- 避免 padding、border、font-size 过大等干扰实际居中效果的因素
- 字体本身有上下留白（如 ascent/descent），但 line-height 居中是基于行框的，对绝大多数场景足够准确
一个典型写法
HTML：<div class="box">这是一行文字</div>
CSS：
.box {<br>
height: 40px;<br>
line-height: 40px;<br>
white-space: nowrap;<br>
text-align: center; /* 如需水平居中可加 */<br>
}
注意事项
- 如果字体特别高（比如用了 icon font 或超大字号），可能需要微调 line-height 略大于 height 来补偿
- 不要和 flex 布局混用——如果同时写了 display: flex 和 line-height，line-height 会失效
- 多行文本不能用这个方法，应改用 flex 或 grid
