CSS 实现 文本垂直居中

实现文本垂直居中

方法 1：使用 line-height

实现原理

将 line-height 设置为与容器高度相同，使单行文本垂直居中。

代码

.lay-hd {
    width: 972px;
    height: 32px;
    line-height: 32px; /* 设置行高与容器高度相同 */
    text-align: start;
    background-color: #2183c6;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #ffffff;
    font-family: "SimSun", "宋体", serif;
    top: 1px;
    padding: 1% 2%;
}

优点

• 简单易用，适合单行文本。

缺点

• 不支持多行文本。
• 如果文本换行，line-height 会导致垂直居中失效。

---

方法 2：使用 Flexbox

实现原理

将容器设置为 Flex 布局，并通过 align-items: center; 实现垂直居中。

代码

.lay-hd {
    width: 972px;
    height: 32px;
    display: flex; /* 设置 Flex 布局 */
    align-items: center; /* 垂直居中 */
    text-align: start;
    background-color: #2183c6;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #ffffff;
    font-family: "SimSun", "宋体", serif;
    top: 1px;
    padding: 1% 2%;
}

优点

• 支持多行文本。
• 灵活易用，适合复杂布局。

缺点

• 需要父容器支持 Flex 布局。

---

方法 3：使用 Grid

实现原理

将容器设置为 Grid 布局，并通过 align-items: center; 实现垂直居中。

代码

.lay-hd {
    width: 972px;
    height: 32px;
    display: grid; /* 设置 Grid 布局 */
    align-items: center; /* 垂直居中 */
    text-align: start;
    background-color: #2183c6;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #ffffff;
    font-family: "SimSun", "宋体", serif;
    top: 1px;
    padding: 1% 2%;
}

优点

• 支持多行文本。
• 简单易用，适合复杂布局。

缺点

• 需要父容器支持 Grid 布局。

---

方法 4：使用 padding 和 box-sizing

实现原理

通过调整 padding 使内容垂直居中。

代码

.lay-hd {
    width: 972px;
    height: 32px;
    padding: 6px 2%; /* 调整上下 padding 使内容居中 */
    box-sizing: border-box; /* 确保 padding 不影响容器高度 */
    text-align: start;
    background-color: #2183c6;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #ffffff;
    font-family: "SimSun", "宋体", serif;
    top: 1px;
}

优点

• 简单易用，适合单行文本。

缺点

• 需要手动计算 padding 值。
• 不支持多行文本。

---

方法 5：使用 transform

实现原理

将内容绝对定位，并通过 transform: translateY(-50%); 实现垂直居中。

代码

.lay-hd {
    width: 972px;
    height: 32px;
    position: relative; /* 设置相对定位 */
    text-align: start;
    background-color: #2183c6;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #ffffff;
    font-family: "SimSun", "宋体", serif;
    top: 1px;
    padding: 1% 2%;
}

.lay-hd span {
    position: absolute; /* 设置绝对定位 */
    top: 50%; /* 向下移动 50% */
    transform: translateY(-50%); /* 向上移动自身高度的一半 */
}

HTML

<div class="lay-hd">
    <span>这是垂直居中的文本</span>
</div>

优点

• 支持多行文本。
• 灵活易用。

缺点

• 需要额外嵌套元素。

---

方法对比

方法	适用场景	优点	缺点
line-height	单行文本	简单易用	不支持多行文本
Flexbox	单行或多行文本	灵活，支持复杂布局	需要父容器支持
Grid	单行或多行文本	简单，支持复杂布局	需要父容器支持
padding	单行文本	简单	需要手动计算 padding 值
transform	单行或多行文本	灵活	需要额外嵌套元素