1--利用transform实现居中效果
<div class="center">
....
</div>.center{
text-align: center;
background-color: #fff;
border-radius: 20px;
width: 300px;
height: 350px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，
垂直方向上一样，让div的top与屏幕的top相距50%。
所以再用transform向左（上）平移它自己宽度（高度）的50%，
也就达到居中效果了。
2--利用transform 实现鼠标停放在图片上有种缩放 放大的动画效果
<el-image
fit="cover"
:src="weixin"
:lazy="true"
style="width:32px;height:32px;"
class="header-icon"
/>
.header-icon {
cursor: pointer;
backface-visibility: hidden;
transform: translateZ(0);
transition: transform 0.25s ease-out;
}
.header-icon:hover {
transform: scale(1.2);
color: #60D4E7;
} transform是变形的意思，有 旋转rotate、扭曲skew、缩放scale、移动translate、矩阵变形matrix
rotate(xx deg)(2D), rotateX()(3D), rotateY()(3D)：以中心为基点，deg表示旋转的角度，为负数时表示逆时针旋转。
translate(x,y) ，translateX(x) ，translateY(y)：以中心为基点按照设定的x,y参数值,对元素进行进行平移。
scale(x,y)，scaleX(x,1)， scaleY(1,Y)：缩放基数为1，如果其值大于1元素就放大，反之其值小于1为缩小。
skew(x,y)， skewX(x)， skewY(y)：以中心为基点，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。
所有操作的默认的基点都在中心位置。
