Пустое пространство за пределами HTML

Question

У меня есть простой div, который должен быть в центре экрана.Тот же код работает в Chrome, Firefox, но вокруг html в IE11 и Microsoft Edge генерируется пробел.

Пожалуйста, предоставьте любые обходные пути, кроме установки скрытого переполнения.У меня есть контент, который может переполниться по вертикали.

https://i.stack.imgur.com/ayi34.png

body {
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: blue;
}

.inner {
  position: absolute;
  width: 200px;
  height: 300px;
  background-color: red;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
  <div class="inner"></div>
</div>

Answer 1

Предоставленный вами фрагмент кода не воспроизводит проблему.Он показывает только красный div.Вам нужен внутренний красный div в центре внешнего синего div?Я делаю демонстрацию, и она работает в IE 11 и Edge, вы можете проверить это:

body {
  margin: 0;
  padding: 0;
}

.container {
  text-align: center;
  width: 100%;
  height: 100%;
  background-color: blue;
}

.inner {
  display: inline-block;
  vertical-align: middle;
  width: 200px;
  height: 300px;
  background-color: red;
  margin: 4em;
}

<div class="container">
  <div class="inner"></div>
</div>

Answer 2

Используйте flexbox, вот пример, который я протестировал в IE11, поэтому он должен работать для всех ваших поддерживаемых браузеров.Я добавил поле для максимального размера, чтобы красная рамка не занимала весь экран, вы можете удалить ее, если вас это не волнует.Я также преобразовал вашу высоту и ширину в минимальную высоту и минимальную ширину, если вы хотите наименьший размер по умолчанию.

body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  background-color: blue;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
}

.inner {
  min-width: 200px;
  min-height: 300px;
  background-color: red;
  margin: 4em;
}

<div class="container">
  <div class="inner">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </p>
  </div>
</div>