CSS 垂直居中

<div class="div-contain">
  <md-icon class="icon-middle">new</md-icon>
</div>

.div-contain {
  dispaly: table;
  width: 100%;
  height: 100%;
}
.icon-middle {
  display: table-cell;
  vertical-align: middle;
}

<div id="box">
    <div id="child">test vertical align</div>
</div>

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    position: relative;
}
#child {
    background: orange;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}