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;
top:0;
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.

https://codepen.io/iamsojha/pen/qBOqvGx

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

1 Like