css让文字水平垂直居中

今天面试被问到了，没答上来，真是太菜了，总结一下吧，下面是我知道的三种:

<div class="center">文字水平垂直居中</div>

1. text-align + line-height

.center{
    width: 200px;
    height: 80px;
    border:1px solid black;
    text-align: center;
    line-height: 80px;
}

2. flex + justift-content + align-items

.center{
    width: 200px;
    height: 80px;
    border:1px solid black;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

3. table-cell + vertical-align + text-align

.center{
    width: 200px;
    height: 80px;
    border:1px solid black;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

注意：使用第三种方法的话文字所在元素不能设置为绝对定位（absolute、fixed），要不然垂直居中会失效。还有，使用flex的话注意兼容性。