Flex布局嵌套踩坑

多层flex水平垂直居中嵌套时，子元素中的元素没有垂直居中

测试浏览器：火狐， Google浏览器暂未发现此问题

页面布局
.contanier {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: .8125rem;
    text-transform: uppercase;
}

.badge {
    background-color: #090909;
    color: #fff;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: .875rem;
    border-radius: .875rem;
    font-size: .75rem;
    padding: 0;
}

.digits-text{
    min-width: .875rem;
    padding: .125rem .25rem;
    line-height: .625rem;
}

99+布局：
<div class="contanier">
    <label class="badge">
        <span class="digits-text">99+</span>
    </label>
  ...other html
</div>

14布局：
<div class="contanier">
    <div>
      <label class="badge">
        <span class="digits-text">99+</span>
      </label>
    </div>
  ...other html
</div>

如上代码所示：14的badge和99+badge最大的区别就是14的badge外层套了一层div
原因：当多层flex嵌套,子元素height不够高, 并且此时父容器和子元素都具有padding的时候, flex分配给子元素的空间不足以支撑起子元素的垂直居中,子元素此时看上去会偏下.
解决办法：给子元素嵌套一个不具有flex的div, 将父容器和子元素隔离开来, 此时子元素的flex就会重新分配, 肉眼可见居中。