网页中心框

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

我编辑了以下 2 css code.Hope 这就是你需要的。

.stage {
position: relative;
background-color: black;
}

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

Answer 2

试试这个方法，它只是对你已有的进行调整：

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

    /* new */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
}

revised codepen

这里对居中方法进行说明：

Answer 3

因为你的navbar是固定的，是从document flow拿来的，所以top:0会把box拉长，所以不会push box，这里要么猜猜看，要么涉及JS ，我们将采用导航栏高度并将其分别用于推送框，然后根据需要从顶部和底部添加所需的 space。

* {
  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>

网页中心框

Center box on webpage

css

centering

flexbox