一、水平居中
子元素相对于父元素定位，如果不设置left、top等属性，那默认会定位在父元素左上角位置：
此时在子元素设置样式left:50%,子元素会向右移动父元素的50%：
而子元素本身也有宽度，需要设置transform: translateX(-50%);才能真正意义上定位到父元素的水平居中位置：
transform: translateX(-50%); 意义是把子元素在水平方向上向左平移子元素的50%；
二、垂直居中
子元素设置top:50%后，此时子元素会向下移动父元素的50%：
由于子元素本身还有高度，所以需要设置transform: translateY(-50%);才能真正意义上定位到父元素的垂直居中位置：
三、水平垂直居中
transform中，translateX不能与translateY同时使用，会使前者失效， 需要使用transform: translate(-50%,-50%)即可：
