Centering elements doesn't work in Internet Explorer

Question

I'm using an often-referred to class to center my content both horizontally and vertically inside a flex container. It works across all modern browsers, but even fairly new Internet Explorer versions are giving me trouble.

Here's the relevant portion of my markup, making (ab)use of Bootstrap's embed-responsive classes to maintain ratio.

HTML:

<div class="container-fluid embed-responsive embed-responsive-16by9" style="background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%), url('http://placehold.it/800X600') no-repeat;background-size:cover;background-position:center">
  <div class="content-center">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 text-center">
          <button id="play-video" type="button" class="btn btn-default" data-toggle="modal" data-target="#video-modal" data-youtube="scWpXEYZEGk">
            Play
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

.content-center {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    float: none;
}

Unfortunately, the elements are not centered but at the right of the page.

Here's a screenshot for reference

jsFiddle

Answer 1

The problem is caused by a combination of two factors:

• conflict between author and Bootstrap styles
• faulty IE rendering behavior

This is the code at issue:

Bootstrap styles:

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;   /* <-- source of the problem in IE */
    margin-left: auto;    /* <-- source of the problem in IE */
}

Author styles:

.content-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center; /* <-- source of the problem in IE */
    float: none;
    max-height: 30%;
}

To make a long story short, for the content to center properly in IE use either auto margins or justify-content: center.

Using both breaks the centering in IE because of faulty implementation of CSS priority.

For details see my answer here: Flex auto margin not working in IE10/11

Revised Demo (with justify-content disabled)