Html 柔性件未在IE中居中

我试着在两个轴的页面中心放置一个小框。我让它在Chrome、Firefox和Edge中运行，但IE仍然不一致。与我的内容相比，虚拟框的比例为200%，它似乎卡在了虚拟框的右下角

我尝试更改

.content

的flex属性，并将其包装到另一个

中，但没有效果

我怎样才能使盒子在IE中居中

html，正文{
宽度：100%；
身高：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.内容{
位置：绝对位置；
宽度：400px；
高度：200px；
背景色：#333333；
}

问题 flex容器的绝对定位子对象将从文档的正常流中取出

事实上，它们甚至不是flex项，因为它们不接受flex属性

根据规范：

因为它是流动的，一个绝对定位的子flex 容器不参与flex布局

以下是您的布局在Chrome、Firefox和Edge中仍然有效的原因：

继续规范：

确定flex容器绝对定位子容器的静态位置时，假设子容器和flex容器都是其使用大小的固定大小的盒子，则子容器的定位就好像它是flex容器中唯一的flex项目一样。为此，

auto

页边距被视为零

但是，对于，这可以解释渲染差异

解决方案 因为您的内容项没有做任何与flex相关的事情，所以只需使用标准的非flex方法进行水平和垂直居中

正文{
高度：100vh；
位置：相对位置；
}
.内容{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：400px；
高度：200px；
背景色：#333333；
}

---

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

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

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

IE浏览器中的结果如下所示：

---

IE11？因为正如所说：部分支持是由于存在大量bug，IE11。我想知道是否有任何解决方法。尝试添加到您的。内容

边距：auto

我在上面找到了这个，也许它可以帮助您