Flex项目不在IE中居中

Question

我正在尝试在两个轴上的页面中心放置一个小框。我可以在Chrome，Firefox和Edge中使用它，但是IE仍然无法对齐。该框似乎卡在了虚拟框的右下角，该虚拟框与我的内容相比缩放了200％。

我尝试更改.content的flex属性并将其包装到另一个<div />中，但无济于事。

如何在IE中居中显示框？

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  position: absolute;
  width: 400px;
  height: 200px;
  background-color: #333333;
}

<div class="content">

Answer 1

问题

flex容器的绝对定位的子代将从文档的正常流程中移除。

实际上，它们甚至都不是flex项目，因为它们不接受flex属性。

规格中的

：

  

§ 4.1. Absolutely-positioned Flex Children

     

由于流出，是flex的绝对定位子元素   容器不参与弹性布局。

这就是为什么您的布局仍然可以在Chrome，Firefox和Edge中使用的原因：

继续遵循规范：

  

确定绝对位置的flex容器的子项的静态位置，以使子项在flex容器中的位置就像唯一的flex项一样，并假定子项和flex容器均为固定大小的盒子他们使用的大小。为此，auto边距被视为零。

     

read more >>

不过，IE11 provides only partial support代表current flexbox specification，这可以解释渲染差异。

解决方案

由于您的内容项目没有进行任何与柔韧性相关的操作，因此只需使用标准的非柔韧性方法进行水平和垂直居中。

body {
  height: 100vh;
  position: relative;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 200px;
  background-color: #333333;
}

<div class="content">

上面的居中方法在这里说明：

• Element will not stay centered, especially when re-sizing screen

Answer 2

尝试删除position属性。代码如下：

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  width: 400px;
  height: 200px;
  background-color: #333333;
}

在IE浏览器中的结果如下：