CSS 实现 文本垂直居中

实现文本垂直居中

方法 1:使用 line-height

实现原理

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

代码
css 复制代码
.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; 实现垂直居中。

代码
css 复制代码
.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; 实现垂直居中。

代码
css 复制代码
.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:使用 paddingbox-sizing

实现原理

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

代码
css 复制代码
.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%); 实现垂直居中。

代码
css 复制代码
.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
html 复制代码
<div class="lay-hd">
    <span>这是垂直居中的文本</span>
</div>
优点
  • 支持多行文本。
  • 灵活易用。
缺点
  • 需要额外嵌套元素。

方法对比

方法 适用场景 优点 缺点
line-height 单行文本 简单易用 不支持多行文本
Flexbox 单行或多行文本 灵活,支持复杂布局 需要父容器支持
Grid 单行或多行文本 简单,支持复杂布局 需要父容器支持
padding 单行文本 简单 需要手动计算 padding
transform 单行或多行文本 灵活 需要额外嵌套元素
相关推荐
爱上大树的小猪3 分钟前
【前端实战】Flex布局实战:打造经典自适应导航栏(附移动端折叠方案)
前端·javascript·flexbox
Anlici14 分钟前
深入浅出Vue响应式原理:手把手解析Proxy与依赖追踪
前端·vue.js·面试
mon_star°16 分钟前
css实现报警特效
前端·css
AKA大佬17 分钟前
@aspnet/signalr服务器与客户端之间实时的双向通信
前端·angular.js
ak啊17 分钟前
AST 解析器 Parser
前端·webpack·源码阅读
北京_宏哥17 分钟前
🔥《手把手教你》系列练习篇之8-python+ selenium自动化测试(详细教程)
前端·python·selenium
刘同学有点忙18 分钟前
浏览器内置响应式编程?用 TC39 Signals 提案实现 TodoList
前端·响应式编程
destinying18 分钟前
原生JavaScript实现页面滚动监听:从入门到精通
前端·javascript·vue.js
北京_宏哥19 分钟前
🔥《手把手教你》系列练习篇之7-python+ selenium自动化测试(详细教程)
前端·python·selenium
稻城亚丁有沉香20 分钟前
Native 与 Flutter 混合开发中的 Flutter 多引擎与单引擎分析
前端