Attempting to center all divs vertically for a random joke generator

This is what I expect:

This is what I got:

My Code that I expected to center every div:
div {

position: absolute;
bottom: 0;
left: 0;
right: 0;

margin: auto;


The link to all of my code:

The browser is doing exactly what you are telling it to do. The div elements are absolutely positioned relative to the nearest ‘positioned’ element or body.
I think what you are interested in is center the divs. You can use flex positioning to achieve your objective.

Here i made little modification to your pen. Hope it helps :grinning:

1 Like