小知识1--transform

transform

对元素进行旋转、缩放、移动或倾斜。

居中定位：

transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;

跟下面效果一样：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

• transform对元素移位变换，不改变本来元素在文档流中的位置，不会造成文档流重排