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 单行或多行文本 灵活 需要额外嵌套元素
相关推荐
KL's pig/猪头/爱心/猪头1 分钟前
lws-minimal-ws-server前端分析
前端
TheK2 分钟前
【源码分析】 一文搞清楚React全流程
前端
渔樵江渚上3 分钟前
使用 Web Worker 解析 CSV 文件
前端·javascript·面试
悟空和大王3 分钟前
win11下使用wsl2 + docker 打造前端开发环境
前端
Silence_xl4 分钟前
nvm安装node版本
前端
星光不问赶路人6 分钟前
梳理字节数据(Uint8Array)转换成字符串的4种方法
前端
前端卧龙人7 分钟前
如何通过 Nginx 实现前端与后端的协同部署
前端
simple丶8 分钟前
领域模型 DSL设计与解析引擎
前端
我不是迈巴赫9 分钟前
虚拟列表业务封装思路分享
前端·javascript
twohands10 分钟前
使用两段代码,通过 View Transitions API 为主题切换添加平滑过渡动画
前端