div居中问题

DIV左右居中

需要固定div宽度

body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}
div{
  margin:0 auto;
  width:500px;
  height:auto;
}

DIV 上下左右居中

缺点：需要固定宽高

body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}
div{
  position:relative;
  top:50%;
  left:50%;
  margin-top:-250px;
  margin-left:-250px;
  /*此时宽和高都要固定*/
  width:500px;
  height:500px;
}

Img居中 

父div display：table-cell

<div>
  <div style="display:table-cell;width:700px;height:500px;text-align:center;vertical-align:middle;">
    <img src="1.png" style="max-width:100%;max-height:100%;" />
  </div>
</div>

translate居中

div{
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  transform:translate(-50%,-50%);
}