实现文本垂直居中

方法 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:使用 padding
和 box-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 |
单行或多行文本 | 灵活 | 需要额外嵌套元素 |