Центр полноэкранного div с полем

Question

Я не знаю, как центрировать полноэкранный div. Я хочу центрировать div с width: 90% и height: 90%, но когда я использую этот код:

html,
body {
  width: 100%;
  height: 100%;
}

.outer {
  height: 100%;
  position: relative;
  text-align: center;
  width: 100%;
}

.inner {
  height: 90%;
  width: 90%;
  position: relative;
  top: 5%;
  background: red;
  margin: 0 auto;
}

<div class="outer">
  <div class="inner">

  </div>
</div>

Я получаю немного свитка, который мне не нужен.

Answer 1

Используйте это:

html,body {
    margin: 0;
   //other codes...
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

.outer {
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
}

.inner {
    height: 90%;
    width: 90%;
    position: relative;
    top: 5%;
    background: red;
    margin: 0 auto;
}

<div class="outer">
    <div class="inner">

    </div>
</div>