盒子div水平垂直居中

父盒子和子盒子都不定宽高，如何使子盒子水平垂直居中？这是个老生常谈的问题了，也是面试官喜欢问的问题，在此吐槽一下有些面试官只追求数量不追求质量的方式，真是，知道的方法再多有多少意义，难道开发中轮流着用吗？
在此就不列举哪些五花八门的方法了，只推荐两种适用性广的方法，一般够用了。

// 方法一：利用flex布局
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

// 方法二：利用定位及位移
.parent {
    position: relative;
}
.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

以上两种方法都有一些不适用的场景，根据需要选择即可。
flex方法的局限性在于对父盒子里所有的子元素都会生效，如果子元素不止一个，那就都一起居中了。