Centering an object vertically on web page?

1

I am “trying” to work on the random quote generator but I can not get the layout of my page right. I basically just want to have a div in the middle containing the quote and the boxes. I’ve spent the last three days just stressing out over getting this box centered on my page. I know this is annoying in css and I’ve tried a few methods from googling but the only thing I can get it to do is center horizontally. I am not building it on codepen right now because I’m trying to use git as much as possible so I put everything on GitHub. I reached out to the gitter/frontend and created a codepen so it would be easy to share and with their help I was able to get it to center a box. The codepen is here: https://codepen.io/brewercodym/pen/dzNmJE

When I apply the same code to my code on sublime it does not work when loading it in chrome. I’m not sure what I am doing wrong. I’m not looking for an easy answer just looking to understand what I am doing wrong and how we need to be thinking about this right.

Thanks for any help.

3

Did you make sure you’re importing Bootstrap? .container and .jumbotron are Bootstrap components so you need to use a CDN in the head.

5

Oh boy, I’m a dingus.

6

I’m the real dingus, collnthornton got me on the right track. of course it was working in the codepen because the codepen html automatically links the css and of course my local copy didn’t have that link. egg on my face!

1 Like