IE 11 flex align-Items: center with an absolute positioned div aligns the top of the div not the middle

IE 11 flex align-Items: center with an absolute positioned div aligns the top of the div not the middle

父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>

在下面添加 css 并勾选

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

添加 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>