在父级元素加3句话，就可以实现子元素水平垂直居中

css3不定宽高水平居中：

在父级元素加3句话，就可以实现子元素水平垂直居中。

justify-content:center;//子元素水平居中
align-items:center;//子元素垂直居中
display:flex;

还有2种方式可以实现水平垂直居中：

第一种实现原理：利用 margin:auto 来实现上下左右等分，但是margin存在很多问题，比如 margin:auto 只能做到左右等分，无法做到上下等分，此时可以把父容器包装成BFC（给父容器增加display:flex就可以触发BFC了）就可解决margin的问题从而实现上下左右等分也就是垂直水平居中了。

<style>
.box{
 200px;
height:200px
display:flex;
}
.son{
100px;
height:100px;
margin:auto
}
</style>
<div class='box'>
  <div class="son"></div>
</div>

第二种，利用定位：

<style>
.box{
  200px;
  height:200px
  position:relative;
  }
.son{
  100px;
  height:100px;
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0

}
</style>
<div class='box'>
  <div class="son"></div>
</div>