div水平并垂直居中五种方式

定位布局：

第一种：父级元素relative，子元素absolute,并且left,right,bottom,top,设置为0，margin:auto,就可以水平垂直居中

第二种：父元素relative,子元素absolute,left为50%,top为50%，再给margin-left负你子盒子自身/2,和margin-top:负你盒子自身/2

第三种：父元素relative,子元素absolute,left给50%,top给50%，再给盒子  transform:translate3d(-50%,-50%,0);

第四种：flex布局

给父div设置  display: flex;在给父div设置水平居中 justify-content: center;，再给父div设置垂直居中align-items: center;

第五种：

使用grid布局

使用grid布局给父盒子设置display: grid;，再给父盒子设置 place-items: center;让他水平并垂直居中