中心问题

Question

好的，所以我刚开始为网站制作一个基本模板，而且我已经遇到了集中化的问题。

我有一个大盒子，我想覆盖网站的大部分，每边都有一个小房间，我只是希望它挂在网站中心。

问题是，我把位置设置为相对而且事物消失了，我将它设置为绝对值，然后事物显示出来但当然不是中心。我只是想知道为什么当我将它设置为相对时，盒子会消失，而它应该是相对于身体的。

这里是所有代码，我刚刚开始使用此模板并不多

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>

Answer 2

我猜你的问题是身体未知高度组合的百分比高度。您应该在身体上添加一个高度，如下例所示：

html, body {
    height: 100%;
}

Working JFiddle

Answer 3

出现问题，因为盒子没有固定的高度。因此，您需要将body和html的高度设置为100%

* {
  margin: 0px;
  padding: 0px;
}
html {
  height: 100%;
}
body {
  background-color: #212121;
  height: 100%;
}
.bigbox {
  background-color: red;
  height: 90%;
  width: 90%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  float: left;
}

<div class="bigbox">

</div>

Answer 4

首先向div添加宽度。您可以采用px，%，vw等格式执行此操作。

div{
  width: 80%;
  margin: 0 auto;
}

Answer 5

以下内容应该可以满足您的需求。您可以通过更改html，正文高度百分比和.bigbox边距来调整边框。

＆＃13;

＆＃13;

html, body {
  height: 98%;
}

body{
  background-color:#212121;

}


.bigbox{
  background-color:red;
  height: 100%;
  margin: 15px 5px;
  position: relative;
}

＆＃13;

<div class="bigbox">

</div>

＆＃13;

＆＃13;

＆＃13;