实现一个容器上下左右居中对齐

实现如下

实现效果参考 element 的布局效果

<div class="box-wapper">
  <div class="wapper">
    <!--写你要实现的内容比如：图片-->
  </div>
</div>

.box-wapper {
  width: 100%;
  height: 100%;
  text-align: center;
  &::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
  }
  .wapper {
      display: inline-block;
      vertical-align: middle;
  }
}