垂直水平居中

初始html:
<div id="container"> <div id="box"></div> </div>
初始css:
#container{ width: 400px; height: 400px; }
#box{ width: 100px; height: 100px; }

方法一：* margin: auto; *（必须固定父元素大小）

#container{
  position: relative;
}
#box{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

方法二：绝对定位法 （必须固定父元素大小）

#container{
  position: relative;
}
#box{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
/* 或者 transform: translate(-50%,-50%);这种方法不需要知道子元素的大小 */
}

方法三：table-cell方法（可不设置父元素大小）

#container{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  /*此时给父元素设置margin无效，并且不设置父元素的宽高只设置padding也可实现居中 */
}
#box{
  display: inline-block;
}

方法四：flex布局（可不设置父元素大小）

#container{
  display: flex;
  /* 此时父元素也可不知大小，仅用padding撑开盒子也可居中，但是这里父元素是块元素，要占满一行 */
}
#box{
  margin: auto;
}
/* 或者 */
#container{
  display: flex;
  justify-content: center;
  align-items: center;
}
#box{
}