Центральное окно на веб-странице

Question

Я написал маленький сайт, который можно найти здесь .Все работает, как и ожидалось, за исключением двух вопросов:

• Поле должно идеально располагаться в центре страницы (с небольшим отступом между ним и панелью навигации и некоторым отступом между ним ивнизу)
• Внизу не должно быть пробелов (фон частиц.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

Попробуйте этот метод, который просто является корректировкой того, что у вас уже есть:

.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%;
}

пересмотренный кодовый блок

Метод центрирования объясняется здесь:

• Элемент не будет оставаться в центре, особенно при изменении размера экрана

Answer 2

, поскольку ваша панель навигации исправлена, она берется из потока документов, поэтому top: 0 растянет рамку до, поэтому она не будет вытаскивать рамку, здесь мы либо играем в угадайку, либо задействуем 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>

Answer 3

Я редактировал приведенный ниже код 2 CSS. Надеюсь, это то, что вам нужно.

.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; 
}