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;
