使用css让元素垂直水平居中的几种超好用的方法

第一种：

width:300px;
height:300px;
position:absolute;
left:50%;
top:50%;
(左右50%，把左上角移动到了中心点)
margin:-150px 0 0 -150px;(往上移宽的一半，往左移长的一半)

第二种（原理和第一种一样）

width:300px;
height:300px;
position:absolute;
left:50%;
top:50%;
transform：translate(-50%,-50%);

第三种：固定定位

position:fixed;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;

第四种：flex(设置父)

display:flex;
justify-content:center;
align-items:center;

第五种，flex，父子都需设置

display:flex;(父)
margin:auto;(子)