垂直水平居中的多种方法

1.flex布局

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

 

2.子元素absolute;

.parent {
    position: relative;  
}

.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    // 或者知道元素的尺寸，margin负尺寸一半也可以
}

 

3.line-height + text-align (多行文本、单行文本)

 

.parent {
    width: 500px;
    height: 500px;
    line-height: 500px; // 垂直居中;
    text-align: center; // 水平居中;
}
.child {
    display: inline-block; // 多行文本需要设置inline-block;
    line-height: 16px; // 重置文本本来的line-height;
}

 

4.table-cell

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