css - 网页中心框

Question

我写了一个可以找到的小网站here .一切都按预期工作，除了两个问题:

• 理想情况下，该框应位于页面的中央(它和导航栏之间有一些填充，并且它和底部之间有一些填充)
• 底部不应有空格(particles.js 背景应横跨整个网页)

不幸的是，我不是一个非常有经验的网络开发人员，所以这个问题的解决方案让我望而却步。这是相关的 HTML:

<div class="stage">
  <div id="particles-js"></div>
  <div class="container">
    <div class="box">
      <span>Hello, world!</span>
    </div>
  </div>
</div>

和CSS:

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

.stage {
    position: relative;
    height: 100%;
    width: 100%;
    background-color: black;
}

#particles-js {
    position: sticky;
    height: 100%;
}

.container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    align-container: center;
    justify-content: center;
    max-width: 60%;
    max-height: 60%;
}

.box {
    align-self: center;
    background-color: black;
    color: white;
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 0;
    border: solid green;
    text-align: center;
}

谢谢!

Answer 1

由于你的navbar是固定的，它是从文档流中获取的，因此top:0会将框拉伸(stretch)到，所以它不会弹出框，这里我们要么玩猜谜游戏要么涉及JS，我们将采取导航栏高度并分别用它来插入框，然后根据需要从顶部和底部添加所需的空间。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

.stage {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: black;
}

#particles-js {
  position: sticky;
  height: 100%;
}

.container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  max-width: 60%;
  max-height: 60%;
}

.box {
  align-self: center;
  background-color: black;
  color: white;
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 10px;
  /* the extra space you wanted */
  top: 61px;
  /* the height being 51px + 10px from a the extra space you wanted*/
  border: solid green;
  text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Spooky Internet</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Blog</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="stage">
  <div id="particles-js"></div>
  <div class="container">
    <div class="box">
      <span>Hello, world!</span>
    </div>
  </div>
</div>

---

或者涉及JS

var navbarheight = document.querySelector('.navbar-fixed-top').getBoundingClientRect().height;

var box = document.querySelector('.box');
var spaceAmount = 10;
box.style.top = (navbarheight + spaceAmount) + "px";
box.style.bottom = spaceAmount + "px";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

.stage {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: black;
}

#particles-js {
  position: sticky;
  height: 100%;
}

.container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  max-width: 60%;
  max-height: 60%;
}

.box {
  align-self: center;
  background-color: black;
  color: white;
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 0;
  top: 0;
  border: solid green;
  text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Spooky Internet</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Blog</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="stage">
  <div id="particles-js"></div>
  <div class="container">
    <div class="box">
      <span>Hello, world!</span>
    </div>
  </div>
</div>