元素居中的方法有很多，块级元素和行内元素居中的方法是不同的！

水平居中

div{
  margin: 0 auto  
}

水平垂直居中

方式一：

div{
/* 定位 */
position: absolute;
margin: auto;
left: 0;
right: 0; 
top:0;
bottom:0;
}

 方式二：

div{
/* 定位 */
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

 垂直居中IMG

img{
/* display：table-cell 或者 position定位 */
display: table-cell;            
text-align: center;            
vertical-align: middle;
}

使用flex布局居中元素

div{
display:flex;
jusitify-content:center;
align-item:center;
align-content:center;
}