中心元素在Internet Explorer中不起作用

Question

我使用经常引用的类来将我的内容水平和垂直地放在Flex容器中。它适用于所有现代浏览器，但即使是相当新的Internet Explorer版本也给我带来了麻烦。

这里是我的标记的相关部分，使（）使用Bootstrap的嵌入式响应类来保持比例。

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

不幸的是，元素不是居中的，而是位于页面右侧。

这是一个参考屏幕截图

jsFiddle

Answer 1

问题是由两个因素共同引起的：

• 作者和Bootstrap样式之间的冲突
• 错误的IE渲染行为

这是有争议的代码：

引导样式：

.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 */
}

作者风格：

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

简而言之，要让内容在IE中正确居中，请使用auto页边距或 justify-content: center。

由于CSS优先级的实现错误，使用两者都打破了IE中心。

有关详情，请参阅我的回答：Flex auto margin not working in IE10/11

Revised Demo（禁用justify-content）