css垂直居中得几种方法

CSS布局中的垂直居中一直是一个让人很头疼的问题，下面介绍几种常用的CSS垂直居中的方法。

1. 使用flex布局

.parent{
    display: flex;
    align-items: center; /* 垂直居中 */
}

2. 使用table-cell布局

.parent{
    display: table-cell;
    vertical-align: middle; /* 垂直居中 */
}

3. 使用position布局

.parent{
    position: relative;
}

.child{
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */
}

4. 使用text-align布局

.parent{
    display: flex;
    justify-content: center; /* 横向居中 */
    text-align: center;
}

.child{
    display: inline-block;
    vertical-align: middle; /* 垂直居中 */
}

5. 使用line-height布局

.parent{
    height: 100px;
    line-height: 100px; /* 文字行高与容器高度相等 */
}
.child{
    display: inline-block;
    vertical-align: middle; /* 垂直居中 */
}

以上是一些常用的CSS垂直居中的方法，根据实际情况选择不同的方法即可。