元素垂直水平居中***

第一种相对定位

position：relative；

第二种绝对定位

position：absolute；

top:0;

left:0;

right:0;

bottom:0;

margin:0auto;

第三种弹性盒模型

变成容器

display:flex;

主轴方向居中（默认为水平方向）

justify-content:center;

交叉轴方向居中（永远与主轴方向垂直）

align-items:center;

 第四种平移

<!--把元素变成定位元素-->

position：absolute；

<!--设置元素的定位位置，距离上、左都为50%-->

top:50%;

left:50%

<!--设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)-->

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