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

Posted 2023-03-06

【中文标题】居中元素在 Internet Explorer 中不起作用

【英文标题】：Centering elements doesn't work in Internet Explorer

【发布时间】：2016-10-15 12:51:27

【问题描述】：

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

这是我的标记的相关部分，利用 (ab) 使用 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

【问题讨论】：

一切看起来都集中在 IE11、IE10、FF 和 Chrome 中。在所有浏览器中几乎相同。绝对不是“在页面右侧”中的任何一个。不确定您使用的是什么版本的 IE，但这里有一些 flexbox 的浏览器兼容性数据：***.com/a/35137869/3597276

我在 Edge 中以兼容模式对 IE10 和 IE11 进行了测试，因为这两个版本对我来说很重要。您可能需要放大小提琴，如果您的屏幕很小，缩放应该是一种解决方法。

@Michael_B 我在帖子中添加了截图

【参考方案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 禁用）