盒子垂直水平居中问题，最全总结

首先定义两个盒子，蓝色是爸爸，绿色是儿子

<div class="parent" id="parent">
    <div class="child" id="child"></div>
</div>

<style>
    .parent{
        width: 200px;
        height: 200px;
        background: rgb(108, 175, 238);
    }
    .child{
        width: 50px;
        height: 50px;
        background: rgb(177, 235, 166);
    }
</style>

那么不知道两个盒子各自宽高的情况下，怎么实现子盒子的垂直居中呢

方法1. 利用 position和margin: auto

.parent {
            position: relative;
        }
        .child {
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

注意：此方法子盒子必须要有具体宽高值。

方法2. 利用display: table-cell

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

此方法本身实际上是控制文本垂直水平居中，而给盒子设置 display: inline-block; 就使得盒子具备了文本的特点，以此实现盒子垂直水平居中。

注意2：此方法父盒子必须要有具体宽高值。

方法3. 利用display: flex/grid

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

或者

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

方法4: 利用display: grid

.parent{
    display:grid;
    place-items: center;
}

注意：此方法等同于方法4，place-items: center是justify-content: center和
align-items: center的简写

方法5: 利用display: flex/grid和margin: auto

.parent {
    display: flex;
}
.child {
    margin: auto;
}

或者

.parent {
    display: grid;
}
.child {
    margin: auto;
}

方法6. 利用transform

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

注意：此方法兼容性不好。

方法7. 使用JavaScript 获取两个盒子大小

<script>
    let parentW = parent.offsetWidth,
        parentH = parent.offsetHeight,
        childW = child.offsetWidth,
        childH = child.offsetHeight;
    parent.style.position = 'reletive';
    child.style.position = 'absolute';
    box.style.left = (parentW-childW)/2 + 'px';
    box.style.top = (parentW-childH)/2 + 'px';
</script>

效果

以上方法真实有效，童叟无欺！