Center box on webpage

Question

I wrote a tiny little website which can be found here. Everything is working as expected, except for two issues:

The box should sit in the center of the page ideally (with a bit of padding between it and the navbar, and some padding between it and the bottom)
There should be no whitespace at the bottom (the particles.js background should span the entire webpage)

Unfortunately, I'm not a very experienced web developer, so the solution to this escapes me. Here is the relevant HTML:

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

and the 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;
}

Thank you!

Kanchan Jha · Answer 1 · 2018-06-11T21:18:42.693

1

I edited the below 2 css code.Hope this is what you need.

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

edited Jun 11 '18 at 21:18

answered Jun 11 '18 at 21:17

Kanchan Jha

64
9

Sorry I mistakenly pressed enter before completing my code. So top: 50% in ".box" places the box in center and removing height and width from ".stage" removes the white space from the bottom. – Kanchan Jha Jun 11 '18 at 21:22

Rainbow · Accepted Answer · 2018-06-22T23:39:28.013

since your navbar is fixed it is taken from the document flow, therefore top:0 will stretch the box to the, so it won't puch the box, here we either play a guessing game or involve JS, We gonna take the navbar height and use it to push box respectively, then add as much as you need for the the space you want from the top and bottom.

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

Or involve 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>

Michael Benjamin · Answer 3 · 2018-06-11T21:34:58.287

Try this method, which is simply an adjustment to what you already have:

.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

The centering method is explained here:

Element will not stay centered, especially when re-sizing screen

Center box on webpage

3 Answers3