五种方法实现未知宽度高度的元素垂直水平居中

<div, class="father">
  <div class="son"></div>
</div>

//第一种
.father{
    position:relative;
    width: 500px;
    height:500px;
    background-color: red;
}
.son{
   position:absolute;
   margin:auto;
   top:0; left:0; bottom:0;right:0;
   width: 300px;
   height:300px;
   background-color: blue;
}

//第二种
.father{
   position:relative;
}
.son{
   margin:auto;
   position:absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
}

//第三种
.father{
    display:-webkit-flex;
    align-items:center;
    justify-content:center;
}
.son{
   margin:auto;
}

//第四种，用表格布局
<div class="pe">
   <div class="he">
       <div class="she"></div>
   </div>
</div>
.pe{
    display:table;
    width:50%;
    height:30%;
    position:absolute;
}
.he{
   display:table-cell;
   vertical-align:middle;
   text-align:center;
}
.she{
   width:50%;
   height:30%;
   display:inline-block;
}

//第五种，行内块元素
<div class="wrap" >
   <b class="vamp"></b>
   <div class="test">行内块元素</div>
<div>
.vamp{
    width:0；
   height:100%;
  vertical-align:middle;
}
.test{
   background:"blue";
   display:inline-block;
}