在 CSS 中实现垂直居中有几种方式,这里列举几种常用的方法:
- 使用
display: flex
和align-items: center
:
.parent {
display: flex;
align-items: center;
}
这种方法需要父元素设置为 flex 布局,子元素设置为 align-items: center
即可实现垂直居中。
- 使用
position: absolute
和top: 50%
:
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
这种方法需要将子元素设置为绝对定位,然后使用 top: 50%
将其移动到父元素正中间,最后使用 transform: translateY(-50%)
将其上移一半的高度,即可实现垂直居中。
- 使用
position: relative
和margin: auto
:
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
这种方法需要将父元素设置为相对定位,将子元素设置为绝对定位,然后将 top
、left
、right
、bottom
四个属性都设置为 0
,最后使用 margin: auto
将其垂直居中即可。
上面的三种方法都可以实现垂直居中的效果,可以根据实际情况选择合适的方法使用。