弹性项目不在 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

问题

Absolutely-positioned flex 容器的子容器从文档的正常流中取出。

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

来自规范：

§ 4.1. Absolutely-positioned Flex Children

As it is out-of-flow, an absolutely-positioned child of a flex container does not participate in flex layout.

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

继续规范：

The static position of an absolutely-positioned child of a flex container is determined such that the child is positioned as if it were the sole flex item in the flex container, assuming both the child and the flex container were fixed-size boxes of their used size. For this purpose, auto margins are treated as zero.

read more >>

然而，IE11 provides only partial support for the current flexbox specification，这可以解释渲染差异。

解决方案

由于您的内容项没有做任何事情 flex-related，只需使用标准 non-flex 方法进行水平和垂直居中。

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">

上面的居中方法在这里解释一下：

Answer 2

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

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

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

在IE浏览器中的结果是这样的：

弹性项目不在 IE 中居中

Flex item not centering in IE

html

css

internet-explorer

flexbox

internet-explorer-11

问题

解决方案