html - 居中元素在 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 呈现行为

这是有问题的代码:

Bootstrap 样式:

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