在CSS布局中，让文字在容器中居中显示是非常常见的需求。根据排版方向的不同，通常可以用水平居中和垂直居中两种方式来处理。下面介绍两种最实用且容易上手的CSS文字居中方法。
一、使用text-align实现水平居中
如果只需要让文字在父容器内水平居中，最直接的方式是给容器设置text-align:center。该属性会影响其内部行内级内容（包括文字、图片、span等）的对齐方式。
/* 让class为box的容器里的文字水平居中 */
.box {
width: 300px;
border: 1px solid #ccc;
text-align: center;
}
对应HTML结构如下：
<div class="box"> 这段文字会水平居中显示 </div>
这种方式简单高效，但仅对水平方向有效，无法解决垂直方向的位置问题。
二、使用line-height实现单行文字垂直居中
对于单行文字，如果想让它在固定高度的容器里垂直居中，可以令line-height的值等于容器高度。因为行高决定了单行文本所占的垂直空间，当行高与容器高度一致时，文字自然被挤在正中。
/* 容器高40px，行高也设40px，文字垂直居中 */
.nav-item {
height: 40px;
line-height: 40px;
text-align: center; /* 顺便水平居中 */
}
<div class="nav-item"> 首页 </div>
需要注意，line-height垂直居中只适用于单行文本。若文字换行成多行，这种方法会导致行间距异常，此时应考虑使用flex布局等其他方案。
两种方法对比
| 方法 | 居中方向 | 适用场景 |
|---|---|---|
| text-align:center | 水平 | 行内内容水平对齐 |
| line-height等于高度 | 垂直（单行） | 固定高度的单行文字垂直居中 |
小结
实际开发中，常把text-align:center和line-height结合使用，让单行文字在框内完全居中。掌握这两种基础写法，能覆盖大量简单排版需求，遇到复杂多行或动态内容时再引入更现代的布局模型即可。
CSS文字居中text-alignline-height修改时间：2026-07-27 16:57:10