Centering button using flex box not working in IE

Question

Hi I have already referenced this issue and tried its answers Flexbox Not Centering Vertically in IE

However the button I have still will not center in IE, it works on all other browsers.

Here is the 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>

And my less

.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;
    }
}
}

What am I missing if I inspect element on the button in ie ii is not visible but with element highlighting it appears to be under the image, perhaps a positioning issue?

For better assistance, post compiled code, which makes it easier to reproduce the problem. Not everybody uses CSS pre-processors. — Michael Benjamin, Jun 15 '17 at 18:17
Which version of IE are you talking about? IE9 and below do not support flexbox. IE 10 and above support limited versions of flexbox. — Terry, Jun 15 '17 at 20:02
@Terry IE11, I needed a quick fix so I just did top / bottom / left / right : 0 and margin auto but I would be interested in why flexbox didnt work there. — gwar9, Jun 15 '17 at 20:04
The dupe link suggests _Safari_, though it's the same issue with the same solution as in my below wiki answer. — Asons, Jun 15 '17 at 20:08

Asons · Accepted Answer · 2017-06-15T20:09:46.950

As you have set position: absolute on the button, IE (and most likely Safari) won't center it as the other browser does.

To fix it, update your .play rule like this

.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

Stack snippet

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

The reason is well explained here:

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

thank you for the explanation I just threw your solution worked and with some more adjustments to the translate it is the solution, thanks for providing additional material that explains the issue. — gwar9, Jun 15 '17 at 20:11

Centering button using flex box not working in IE

1 Answers1