Html 使用flex box的定心按钮在IE中不起作用

嗨，我已经提到了这个问题并尝试了它的答案

然而，我的按钮仍然不会在IE中居中，它可以在所有其他浏览器上工作

这是HTML

<div class="captioned-video">
    <div class="video-container" data-module-dynamic="embed-video">
        <img src="img here"/>
        <button class="play" data-video="video url here"></button>
    </div>
    <div class="caption">
        <h3 class="caption__subhead">Caption Headline</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   </div>
</div>

---

如果我检查ie ii中按钮上的元素不可见，但元素高亮显示时，它似乎位于图像下方，可能是定位问题，我缺少什么

由于您在

按钮上设置了
位置：绝对
，IE（很可能是Safari）不会像其他浏览器那样居中

要解决此问题，请更新
.play
规则，如下所示

.play {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    border: none;
    background-color: rgba(200, 81, 8, 0.8);
    position: absolute;
    top: 50%;                                /* added */
    left: 50%;                               /* added */
    transform: translate(-50%,-50%);         /* added */
    ...


堆栈片段


。字幕视频{
边框：1px纯红；
填充：20px；
显示器：flex；
弯曲方向：立柱；
}
.字幕视频.视频容器{
溢出：隐藏；
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
位置：相对位置；
}
.字幕视频.视频容器img{
flex：无；
}
.字幕视频.视频容器iframe{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.字幕视频.视频容器.播放{
宽度：100px；
高度：100px；
边界半径：100%；
边界：无；
背景色：rgba（200,81,8,0.8）；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
填充：0；
}
.字幕视频.视频容器.播放：悬停{
过渡：全部缓解0.5s；
背景色：#c85108；
}
.字幕视频.视频容器.播放：之后{
内容：“；
位置：相对位置；
显示：内联块；
边框样式：实心；
边框宽度：20px 0 20px 30px；
边框颜色：透明白色；
顶部：2个；
左：5px；
}
.字幕视频.字幕.字幕小标题{
颜色：蓝色；
字体系列：Arial；
字体大小：14px；
}
.字幕视频.字幕p{
字体大小：12px；
字体：Arial；
}

标题标题
Lorem ipsum dolor sit amet，一位杰出的领导者，一位伟大的领袖
暂时性的劳工和财产损失。我们在这里吃得很少，
我们的实验室是一个普通的实验室

要获得更好的帮助，请使用编译后的代码，这样可以更容易地重现问题。不是每个人都使用CSS预处理器。你说的是哪个版本的IE？IE9及以下版本不支持flexbox。IE 10及以上版本支持flexbox的有限版本。@Terry IE11，我需要一个快速修复程序，所以我只做了上/下/左/右：0和边距自动，但我想知道为什么flexbox不能在那里工作。dupe链接建议Safari，虽然这是同一个问题，与我下面的维基答案中的解决方案相同。感谢您的解释，我刚刚将您的解决方案付诸实施，并对翻译进行了更多调整，这就是解决方案，感谢您提供了解释此问题的其他材料。
.play {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    border: none;
    background-color: rgba(200, 81, 8, 0.8);
    position: absolute;
    top: 50%;                                /* added */
    left: 50%;                               /* added */
    transform: translate(-50%,-50%);         /* added */
    ...