当一个父级元素高度为百分比的时候，怎么让子元素垂直居中呢？

方法还是挺多的，我写了2种：

一

html代码

<div class="container-wrapper">
    <div class="container">
      <div class="center">
        
      </div>
    </div>
  </div>

css代码

.container-wrapper{
  width:400px;
  height:300px;
}
.container{
  width:100%;
  height:100%;
  border:1px solid violet;
  position:relative;
}
.center{
  width:100px;
  height:100px;
  position:absolute;
  margin:auto;
  left:0px;
  top:0px;
  right:0px;
  bottom:0px;
  border:1px solid green;
}

二

html代码同上
css代码

.container-wrapper{
  width:400px;
  height:300px;
}
.container{
  width:100%;
  height:100%;
  border:1px solid violet;
  position:relative;
}
.center{
  border:1px solid green;
  width:100px;
  height:100px;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  -moz-transform:translate(-50%, -50%);
  -ms-transform:translate(-50%, -50%);
  -o-transform:translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);