sass mixin 结合伪元素 + vertical-align: middle 实现垂直居中的优雅写法

实现关键：
外面一层标签，附上伪元素。里面放入想垂直居中的元素。

基础布局：

<div class="box">
  <div class="box__item"></div>
</div>	

.box {
  width: 500px;
  height:500px;
  background: red;
}

.box__item {
  width: 300px;
  height:300px;
  background: blue;
}

效果图：

关键代码：

.box__item {
  display: inline-block;
  vertical-align: middle;
}

.box::after {
   content: "";
   display: inline-block;
   height: 100%;
   vertical-align: middle
}

效果图：

sass 代码优化：
封装为 mixin 在全局需要的地方直接引入（借鉴来自 ElementUI 源码）

@mixin utils-vertical-center {
  // 父元素
  $selector: &;
  
  // 放到第一层
  @at-root { 
    #{$selector}::after {
      content: "";
      display: inline-block;
      height: 100%;
      vertical-align: middle
    }
  }
}

// 引入
.box {
  @include utils-vertical-center;
  .box__item {
    display: inline-block;
    vertical-align: middle;
  }
}