html - 居中问题

Question

好的，所以我刚刚开始为网站创建一个基本模板，但我已经遇到了居中问题。

我有一个大盒子，我想覆盖网站的大部分内容，每边都有一个小空间，我只想让它卡在网站的中央。

问题是，我将 position 设置为 relative 然后东西消失了，我将它设置为 absolute 并且东西出现但当然不居中。我只是想知道为什么当我将它设置为 relative 时盒子消失了，而当它应该与 body 相关时。

这是所有的代码，因为我刚刚开始这个模板所以并不多

HTML:

<div class="bigbox">

</div>

CSS:

* {
    margin: 0px;
    padding: 0px;
}

body{
    background-color:#212121;   
}

.bigbox{
    background-color:red;
    height:90%;
    width:90%;
    margin: 0 auto;
    position:relative;
    z-index:1;
    float:left;
}

谢谢你看一看，我确定这是一个迟钝的简单修复

Answer 1

您可以通过多种方式实现您想要的:

垂直高度(vh单位):https://jsfiddle.net/arthurcamara/bjhrz9n9/

*
{
    margin: 0px;
    padding: 0px;
}

body{
    background-color:#212121;

}

.bigbox{
    background-color:red;
    height:90vh;
    width:90%;
    margin: 5vh auto;
}

<div class="bigbox"></div>

绝对定位:https://jsfiddle.net/arthurcamara/bjhrz9n9/1/

body{
    background-color:#212121;

}

.bigbox{
    background-color:red;
    position: absolute;
    top: 5%;
    right: 5%;
    left: 5%;
    bottom: 5%;
}

<div class="bigbox"></div>

和我最喜欢的flexbox:https://jsfiddle.net/arthurcamara/bjhrz9n9/2/

body{
  margin: 0px;
  padding: 0px;
  height: 100vh;
  background-color:#212121;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.bigbox{
    background-color:red;
    width: 90%;
    height: 90%;
}

<div class="bigbox"></div>