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 单行或多行文本 灵活 需要额外嵌套元素
相关推荐
Anlici1 小时前
跨域解决方案还有优劣!?
前端·面试
庸俗今天不摸鱼1 小时前
【万字总结】构建现代Web应用的全方位性能优化体系学习指南(二)
前端·性能优化·webp
追寻光1 小时前
Java 绘制图形验证码
java·前端
前端snow1 小时前
爬取数据利用node也行,你知道吗?
前端·javascript·后端
村头一颗草2 小时前
高德爬取瓦片和vue2使用
前端·javascript·vue.js
远山无期2 小时前
vue3+vite项目接入qiankun微前端关键点
前端·vue.js
陈随易2 小时前
告别Node.js:2025年,我为何全面拥抱Bun
前端·后端·程序员
还是鼠鼠2 小时前
Node.js--exports 对象详解:用法、示例与最佳实践
前端·javascript·vscode·node.js·web
CQU_JIAKE2 小时前
2.5[frontEnd]
前端
Moment2 小时前
前端性能指标 —— FMP
前端·javascript·面试