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

Everything looks centered in IE11, IE10, FF and Chrome. Practically the same in all browsers. Definitely not *"at the right of the page"* in any. Not sure what version of IE you're using, but here's some browser compatibility data for flexbox: http://stackoverflow.com/a/35137869/3597276 — Michael Benjamin, Jun 14 '16 at 17:10
I tested this in Edge in compatibility mode for IE10 and IE11, since those are the two versions that matter to me. You might have to enlarge the fiddle, if your screen is small, zoom should be a workaround. — idleberg, Jun 14 '16 at 17:16

score 8 · Accepted Answer · edited May 23 '17 at 12:08

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)

Centering elements doesn't work in Internet Explorer

jsFiddle

1 Answers1