怎么设置css字体单行居中

在网页布局中，让单行文字在容器内居中是最基础的需求之一，根据居中的方向不同，可以分为水平居中、垂直居中以及同时实现水平垂直居中三种场景，下面分别介绍对应的css设置方法。

一、单行字体水平居中

水平居中是最常用的场景，只需要给文字的父容器设置text-align: center属性即可，该属性会让容器内的行内元素和文本水平居中对齐。

/* 父容器样式 */
.text-container {
    width: 300px;
    height: 60px;
    border: 1px solid #ccc;
    /* 设置文本水平居中 */
    text-align: center;
}

<div class="text-container">
    这是单行居中的文字
</div>

二、单行字体垂直居中

单行文字的垂直居中可以通过设置line-height属性实现，将line-height的值设置为和容器高度一致，文字就会在垂直方向居中。这种方式只适用于单行文字，多行文字使用该方法会出现排版问题。

/* 父容器样式 */
.text-container {
    width: 300px;
    height: 60px;
    border: 1px solid #ccc;
    /* 行高等于容器高度，实现垂直居中 */
    line-height: 60px;
}

<div class="text-container">
    这是单行垂直居中的文字
</div>

三、单行字体同时水平垂直居中

如果需要同时实现水平居中和垂直居中，可以把text-align: center和line-height结合使用，也可以通过flex布局实现，两种方式都适用于单行文字场景。

方法1：text-align + line-height组合

.text-container {
    width: 300px;
    height: 60px;
    border: 1px solid #ccc;
    /* 水平居中 */
    text-align: center;
    /* 垂直居中，行高等于容器高度 */
    line-height: 60px;
}

方法2：flex布局实现

flex布局是更通用的布局方式，设置父容器为flex容器，通过justify-content控制水平对齐，align-items控制垂直对齐，同样可以实现单行文字居中，且后续如果容器内容变化也更容易调整。

.text-container {
    width: 300px;
    height: 60px;
    border: 1px solid #ccc;
    /* 开启flex布局 */
    display: flex;
    /* 水平居中 */
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
}

<div class="text-container">
    这是水平垂直居中的单行文字
</div>

四、注意事项

• line-height实现垂直居中的方法仅适用于单行文字，多行文字使用该方式会导致行间距异常，无法正确居中。
• 如果容器内除了文字还有其他行内元素，text-align: center也会让这些行内元素一起水平居中，需要按需调整。
• 使用flex布局时，如果父容器没有设置固定高度，align-items: center会基于容器的实际高度对齐，需要确认容器的高度是否符合预期。

css字体居中text-alignline-heightvertical-align修改时间：2026-07-16 16:06:24