Css IE 11 flex align项目：使用绝对定位的div居中对齐div顶部，而不是中间

使用位置相对的父div并显示flex，align items:center，绝对定位的子组件不会按预期居中，而是该组件的顶部居中

有人知道如何避开这个怪癖吗

.crumb{
宽度：100%；
边缘顶部：100px；
高度：100px；
背景颜色：灰色；
}
.箭头包装{
高度：100px；
宽度：100px；
背景色：红色；
显示器：flex；
对齐项目：居中；
位置：相对位置；
}
.阿罗{
高度：150像素；
宽度：80px；
背景颜色：蓝色；
位置：绝对位置；
}

---

在下面添加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{
宽度：100%；
高度：100px；
背景颜色：灰色；
}
.箭头包装{
高度：100px；
宽度：100px；
背景色：红色；
显示器：flex；
对齐项目：居中；
位置：相对位置；
证明内容：中心；
保证金：0自动；
}
.阿罗{
高度：60px；
宽度：80px；
背景颜色：蓝色；
位置：绝对位置；
右：0；
左：0；
最高：50%；
底部：0；
保证金：0自动；
转化：translateY（-50%）；
}

这将使其水平居中，而不是垂直居中，如果您在chrome中打开代码笔，您将看到所需的效果我已经编辑了我的答案@MichaelNorriet，这将适用于此特定示例，但是实际的技术问题有多个div和多个hights，所以我希望有一个更通用的解决方案>您可以在chrome中打开代码笔以查看所需的效果