父容器子容器不确定宽高的块级元素，做上下居中

1.flex

#wrap{
    display:flex;
    justify-content:center;
    align-items:center;
}

2.tabel

.parent {
   text-align: center;//水平居中
   display: table-cell;
   vertical-align: middle;//垂直居中
}
.child {
    display: inline-block;//防止块级元素宽度独占一行，内联元素可不设置
}

3.absolute+transform 水平垂直居中

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>

4.webkit-box

//对父级元素设置
position: relative;
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;

for detail: https://github.com/hawx1993/tech-blog/issues/12