Элемент 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">

Answer 1

Попробуйте удалить свойство position.Код как показано ниже:

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

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

Результат в браузере IE выглядит следующим образом:

Answer 2

Проблема

Абсолютно позиционированные дочерние элементы гибкого контейнера извлекаются из нормального потока документа.

На самом деле, они даже не являются гибкими предметами, потому что они не принимают гибкие свойства.

из спецификации:

& секта; 4.1. Абсолютно позиционированный Flex Children

Так как он вне потока, абсолютно позиционированный потомок гибкого Контейнер не участвует в гибкой компоновке.

Вот почему ваш макет в любом случае работает в Chrome, Firefox и Edge:

продолжение со спецификацией:

Статическое положение абсолютно позиционированного дочернего элемента гибкого контейнера определяется так, чтобы дочерний элемент позиционировался так, как если бы он был единственным гибким элементом в гибком контейнере, при условии, что и дочерний элемент, и гибкий контейнер были коробками фиксированного размера их используемого размера. Для этого auto поля рассматриваются как ноль.

читать дальше >>

Однако IE11 предоставляет только частичную поддержку для текущей спецификации flexbox , что может объяснить разницу в рендеринге.

Решение

Поскольку ваш элемент контента не имеет ничего общего с флексом, просто используйте стандартный негибкий метод для горизонтального и вертикального центрирования.

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

Метод центрирования выше объясняется здесь:

• Элемент не будет оставаться в центре, особенно при изменении размера экрана