html - 带边距的全屏居中 div

Question

我不知道如何将全屏 div 居中。我想将 width: 90% 和 height: 90% 的 div 居中，但是当我使用此代码时:

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>