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 单行或多行文本 灵活 需要额外嵌套元素
相关推荐
中微子1 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
Liudef061 小时前
儿童趣味记忆配对游戏
css·游戏·css3
中微子2 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则3 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele4 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4534 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友4 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir4 小时前
vue3.2 前端动态分页算法
前端·算法
烛阴4 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子4 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js