html - 居中带边距的全屏 div

Question

我不知道如何将全屏 div 居中。我想用width: 90%and将 div 居中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>

我得到了一点我不想要的滚动。

标签： htmlcssoverflow

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>