css div 垂直居中

<style>
.valign {
  font-size: 0px;/* clear spacing*/
}
.valign:before {
  content: ‘‘;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}
.valign-middle,
.valign-bottom {
  display: inline-block;
  font-size: 1rem;
}
.valign-middle {
  vertical-align: middle;
}
.valign-bottom {
  vertical-align: bottom;
}
</style>

<div class="valign" style="height: 20rem;border:1px solid red;">
   <div class="valign-middle" style="border:1px solid blue;">
      我在中间
  </div>
</div>
<br>
<div class="valign" style="height: 20rem;border:1px solid red;">
   <div class="valign-bottom" style="border:1px solid blue;">
      我在底部
  </div>
</div>