2d转换

位移 translate

定位

会影响其他盒子位置（脱离标准流）；

行内元素定位，直接变为块级元素；

移动

不影响其他元素的位置；

对行内元素无效；对块级元素生效；

子元素居中

.parent {

  width: 500px;

  height: 500px;

  border: 1px solid #000;

  position: relative;

}

.son {

  width: 200px;

  height: 200px;

  background-color: pink;

  position: absolute;

  left: 50%;

  top: 50%;

  /* 沿着X轴 Y轴 负方向 移动 自身宽高的一半*/

  transform: translate(-50%, -50%);

}