未知宽高的div水平垂直居中

总结的一共是7种方式，以常用程度排序

/* 公共 */
.parent {
    width: 200px;
    height: 200px;
    background: #000;
}

.child {
    width: 100px;
    height: 100px;
    background: #f00;
}

<div class="parent parent1">
    <div class="child child1"></div>
</div>
.parent1 {
    position: relative;
}
.parent1 .child1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

<div class="parent parent2">
    <div class="child child2"></div>
</div>
.parent2 {
    display: flex;
    justify-content: center;
    align-items: center;
}

<div class="parent parent3">
    <div class="child child3"></div>
</div>
.parent3 {
    position: relative;
}
.parent3 .child3 {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

<div class="parent parent4">
    <div class="child child4"></div>
</div>
.parent4 {
    line-height: 200px;
    font-size: 0;
    text-align: center;
}
.parent4 .child4 {
    display: inline-block;
    vertical-align: middle;
}

<div class="parent parent5">
    <div class="child child5"></div>
</div>
.parent5 {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.parent5 .child5 {
    display: inline-block;
    vertical-align: middle;
}

<div class="parent parent6">
    <span></span>
    <div class="child child6"></div>
</div>
.parent6 {
    display: table-cell;
    text-align: center;
}
.parent6 span {
    display: inline-block;
    height: 100%;
    vertical-align:middle;
}
.parent6 .child6 {
    display: inline-block;
    vertical-align: middle;
}

<div class="parent parent7">
    <span>
        <div class="child child7"></div>
    </span>
</div>
.parent7 {
    position: relative;
    display: table;
}
.parent7 span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.parent7 .child7 {
    display: inline-block;
    vertical-align: top;
}

当父级设置display：table-cell的时候，设置margin是不生效的

工作中前几种已经完全够用，都列出来是可能有些面试官会问