Recently, I started to struggle with vertical centering while working on my Random Quote Machine. I had no problems getting it to center horizontally, but couldn’t for the life of me get it to center vertically. I was using a Bootstrap container to hold my content and my CSS looked a little something like this.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

After playing around a bit, I found my main problem. My container, body, and html tags weren’t covering the whole page. Everything within the container was centering within the small space it was taking up on the page.

html, body {
  height: 100%;
}

.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100%
}

I changed my CSS so that container, body, and html were all taking up 100% of the height. I then used justify-content along with flex-direction to vertically center the page. Voila!

Check out my GitHub repo here!

Leave a Reply

Your email address will not be published. Required fields are marked *