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)：以中心为基点，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。

所有操作的默认的基点都在中心位置。