[分享]css中如何设置垂直居中

在CSS中，垂直居中经常是前端开发中需要实现的一个难题。下面我们来讲解一下如何设置垂直居中。/方法1：使用Flex布局/ .parent{ display:flex; justifycontent:c...

在CSS中，垂直居中经常是前端开发中需要实现的一个难题。下面我们来讲解一下如何设置垂直居中。

/*方法1：使用Flex布局*/
.parent{
    display:flex;
    justify-content:center;  /*横向居中*/
    align-items:center;      /*纵向居中*/
}

/*方法2：使用绝对定位*/
.parent{
    position:relative;
}

.child{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

/*方法3：使用table-cell布局*/
.parent{
    display:table;
}

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

以上三种方法都可以有效地实现垂直居中，具体应用请根据需求选择合适的方式。