绝对定位 垂直居中
时间: 2023-06-29 14:20:16 浏览: 102
绝对定位。
要实现绝对定位的元素在父元素中垂直居中,可以使用以下方法:
1. 父元素需要设置 position: relative;
2. 绝对定位的元素需要设置 top: 50%; transform: translateY(-50%);
3. 如果需要水平居中,可以再设置 left: 50%; transform: translate(-50%, -50%);
例如,HTML代码如下:
```
<div class="parent">
<div class="child">绝对定位的元素</div>
</div>
```
CSS代码如下:
```
.parent {
position: relative;
height: 200px;
background-color: #eee;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
这样,就可以实现绝对定位的元素在父元素中垂直居中了。
阅读全文