垂直居中对齐原理

Amaze UI 的垂直对齐的原理为把父容器内的 “幽灵”元素（使用伪元素）高度设置为 100%，再通过设置需要对齐的元素 vertical-align 属性实现
看了一下他的实现原理，是在div块中需要垂直居中的div块前再插入一块隐藏的区块来达到垂直居中显示的效果。
他的代码为

<div class="am-vertical-align" style="height: 150px;">
  <div class="am-vertical-align-middle">
    飘在半空中的 XX
  </div>
</div>

如果是自己写样式的话如下

.parent {
  display:inline-block;
  border:1px solid #000;
  height:100px;
  width:100px;
  text-align:center;
  vertical-align:middle;
  font-size:0;
}

.parent:before {
  content:'';
  display:inline-block;
  height:100%;
  vertical-align:middle;
}

.child {
  vertical-align:middle;
  display:inline-block;
  max-width:100%;
  font-size:1.6rem;
}

<div class="parent">
  <div class="child">
    飘在半空中的 XX
  </div>
</div>