1、父元素： flex

flex相关属性

display: flex;
justify-content: center;
align-items: center;

2、子元素： 绝对定位 + margin

给子元素设置绝对定位，让子元素相对父元素向右、向下移动父元素宽高的50%,
然后在用margin-top和margin-left的负值，往回拉子元素自己宽高的50%;

/* 给父元素设置： */
position: relative;


/* 给子元素设置： */

width: 100px;
height: 100px;
background-color: orange;

position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;

3、子元素： 绝对定位 + transform 位移

transform 的translate设置的百分比， 是相对于子元素本身的，所有我们可以给子元素设置-50%,来解决上一个方法的坑.

/* 父元素还是加一个相对定位 */

/* 子元素设置一下属性 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

4、子元素绝对定位 + 上下左右为0 + margin 为 auto

/* 父元素相对定位 */

/* 子元素设置绝对定位   上右下左都为0   margin为auto */

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
        
margin: auto;