div position: absolute; 内的文字上下居中
时间: 2025-01-18 19:06:17 浏览: 44
当使用CSS的`position: absolute;`将`<div>`元素定位到其父元素之上时,若想使得其中的文字上下居中,可以采用以下策略:
1. **使用line-height**:
设置`.child`元素的`line-height`等于其高度,这会使文字自然地在垂直方向上居中:
```css
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 使元素中心对齐 */
line-height: 100%; /* 假设height = 100px */
text-align: center; /* 可选,仅针对文本行内居中 */
}
```
其中`transform: translate(-50%, -50%)`用于水平和垂直偏移50%,保持元素居中。
2. **利用伪元素`::before`和`::after`**:
利用伪元素创建包含文字的行框,然后设置行高使其与元素大小相等:
```css
.parent {
position: relative;
overflow: hidden;
}
.child:before,
.child:after {
content: "";
display: block;
height: 100%;
margin-top: -0.5em; /* 根据字体大小微调 */
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
注意,这种方法适用于块级元素,对于行内元素,`line-height`通常更简单直接。
在这些方法中,`text-align: center;`可以用来使文字在水平方向上居中,但如果文字本身已经设置为`inline-block`或`inline`,则可能不需要这个属性。
阅读全文
相关推荐




















