[分享]css中实现垂直居中显示

在开发网页时，我们常常会遇到需要实现垂直居中显示的情况。在CSS中，有多种方式可以实现垂直居中，接下来我们来介绍其中的几种方法。1.使用绝对定位和负边距实现垂直居中： .parent { : rela...

在开发网页时，我们常常会遇到需要实现垂直居中显示的情况。在CSS中，有多种方式可以实现垂直居中，接下来我们来介绍其中的几种方法。

1.使用绝对定位和负边距实现垂直居中：

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

2.使用display:table和display:table-cell实现垂直居中：

.parent {
    display: table;
}
.child {
    display: table-cell;
    vertical-align: middle;
}

3.使用flexbox实现垂直居中：

.parent {
    display: flex;
    align-items: center;
    justify-content: center;
}
.child {
    /* flexbox默认是垂直居中，这里无需设置 */
}

以上是常用的几种实现方式，可以根据具体情况选择合适的方法。希望这些方法能够帮助你更好地实现垂直居中显示。