html - Flex 项目不在 IE 中居中

Question

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

我尝试更改 flex 属性.content并将其包装到另一个<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">

标签： htmlcssinternet-explorerflexboxinternet-explorer-11

Answer 1

问题

flex 容器的绝对定位子元素被从文档的正常流程中取出。

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

从规范：

§ 4.1。绝对定位的 Flex 孩子

由于它是外流的，因此 flex 容器的绝对定位子级不参与 flex 布局。

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

继续规范：

弹性容器的绝对定位子项的静态位置是这样确定的，即子项被定位为好像它是弹性容器中唯一的弹性项目，假设子项和弹性容器都是它们使用的固定大小的盒子尺寸。为此，auto边距被视为零。

阅读更多>>

但是，IE11 仅对当前的 flexbox 规范提供了部分支持，这或许可以解释渲染差异。

解决方案

由于您的内容项没有做任何与 flex 相关的事情，因此只需使用标准的非 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">

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

• 元素不会保持居中，尤其是在调整屏幕大小时