水平居中的方式：
若子元素宽度固定，用magin-auto，
缺点：只作用于块级元素，且需知道子元素宽度。父元素设置text-align，子元素设置inline-block（利用内联块也能够居中的特性)
缺点：多个内联会挤一起父元素相对定位，子元素绝对定位，再加上left:50%和margin-left:-50%减去自身宽度的一半
flex布局
父元素设置
{ display: flex;
justify-content: center;
flex-direction: row;
}
垂直居中的方式：
已知子元素宽高
设置position和top，left，再设置负margin减去自身高宽的一半不知子元素宽高
和已知子元素宽高实现基本一致，区别在于用transform：translate(-50%,-50%)实现减去自身高宽的一半flex布局
父元素设置
{ display: flex;
justify-content: center;
align-items: center;
}
