使用弹性框的居中按钮在 IE 中不起作用 [重复]

Question

您好我已经参考了这个问题并尝试了它的答案Flexbox Not Centering Vertically in 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>

还有我的少

.captioned-video {
    border: 1px solid @light-slate;
    padding: 20px;
    display: flex;
    flex-direction: column;

.video-container {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;

    img {
        flex: none;
    }

    iframe /*iframe is here because on btn click the img is swapped to this*/{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .play {
        width: 100px;
        height: 100px;
        border-radius: 100%;
        border: none;
        background-color: rgba(200, 81, 8, 0.8);
        position: absolute;
        padding: 0;
        &:hover {
            transition: all ease 0.5s;
            background-color: rgba(200, 81, 8, 1);
        }
        &:after {
            content: "";
            position: relative;
            display: inline-block;
            border-style: solid;
            border-width: 20px 0 20px 30px;
            border-color: transparent transparent transparent white;
            top: 2px;
            left: 5px
        }
    }
}

.caption {
    .caption__subhead {
        color: @royal-blue;
        font-family: @headings-font-family;
        font-size: 14px;
    }

    p {
        font-size: 12px;
        font-style: @font-family-sans-serif;
    }
}
}

如果我在 ie ii 中检查按钮上的元素不可见但元素突出显示它似乎在图像下方，我错过了什么，可能是定位问题？

Answer 1

由于您在 button 上设置了 position: absolute，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 */
    ...

Updated codepen

堆栈sn-p

.captioned-video {
  border: 1px solid red;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.captioned-video .video-container {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}
.captioned-video .video-container img {
  flex: none;
}
.captioned-video .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.captioned-video .video-container .play {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  border: none;
  background-color: rgba(200, 81, 8, 0.8);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
}
.captioned-video .video-container .play:hover {
  transition: all ease 0.5s;
  background-color: #c85108;
}
.captioned-video .video-container .play:after {
  content: "";
  position: relative;
  display: inline-block;
  border-style: solid;
  border-width: 20px 0 20px 30px;
  border-color: transparent transparent transparent white;
  top: 2px;
  left: 5px;
}
.captioned-video .caption .caption__subhead {
  color: blue;
  font-family: Arial;
  font-size: 14px;
}
.captioned-video .caption p {
  font-size: 12px;
  font-style: Arial;
}

<div class="captioned-video">
    <div class="video-container" data-module-dynamic="embed-video">
        <img src="http://placehold.it/300/f99"/>
        <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>

---

原因在这里解释得很好：

• How to center absolutely positioned children of a flex container in Safari?