IE 11 flex align-Items：中心与绝对定位的div对齐div的顶部而不是中间[重复]

Question

如果父 div 是相对位置并显示 flex，则 align-items: center，绝对定位的子组件没有按预期居中，而是该组件的顶部居中

有人知道如何解决这个怪癖吗？

https://codepen.io/anon/pen/aYXJZe

.crumb {
  width: 100%;
  margin-top: 100px;
  height: 100px;
  background-color: grey;
}

.arrowWrapper {
  height: 100px;
  width: 100px;
  background-color: red;
  display: flex;
  align-items: center;
  position: relative;
}

.arrow {
  height: 150px;
  width: 80px;
  background-color: blue;
  position: absolute;
}

<div class="crumb">
  <div class="arrowWrapper">
    <span class="arrow"></span>
  </div>
</div>

Answer 1

在css下面添加并检查

  .arrow {
  height: 150px;
  width: 80px;
  background-color: blue;
  position: absolute;
top:-25px;
}

Answer 2

添加CSS .arrowWrapper {margin: 0 auto;} 和 .arrow {left: 0; right: 0; margin: 0 auto; transform: translateY(-50%); top: 50%}

.crumb {
    width: 100%;
    height: 100px;
    background-color: grey;
}

.arrowWrapper {
    height: 100px;
    width: 100px;
    background-color: red;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
    margin: 0 auto;
}

.arrow {
    height: 60px;
    width: 80px;
    background-color: blue;
    position: absolute;
    right: 0;
    left: 0;
    top: 50%;
    bottom: 0;
    margin: 0 auto;
    transform: translateY(-50%);
}

<div class="crumb">
    <div class="arrowWrapper">
        <span class="arrow"></span>
    </div>
</div>