未知高度垂直水平居中

1. 未知宽高的弹出框，水平垂直居中

 .parrent {
  position:relative;
  width:100%;
  height:600px;
  }
 .child {
  position:absolute;
  top:50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  }

2. parrent 内的元素水平垂直居中

.parrent  {
    width:500px;
    border:1px solid #888;
}
.child {
    width:100%;
    height:400px;
    border:1px solid #888;
    display: flex;
    align-items: center;
    justify-content: center;
}

3. parrent 内的元素垂直居中

.parrent{
    width:500px;
    border:1px solid #888;
    display:inline-block;
    vertical-align: middle;
}
.child {
    width:100%;
    height:400px;
    border:1px solid #888;
}
.child :after{
        /**主要代码*/
    content:"";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}