Spent 30 minutes trying to center a div vertically and i finally gave up

comments

you can center both at the same time with position : fixed; left : 50%; top : 50%; transform : translate(-50%,-50%);

yes tysm this works!

Please don't do this in most cases - it gets really messy! Instead make the parent element have 100% width and 100vw height, set the display to grid, and use place-items: center

No, the best solution is just `margin: auto;`

Margin: auto will only center horizontally in 90% of cases.

this makes the h1 be at the top and the form be at the bottom

formatting be like

Ah, I didn't know that there are two child elements. Your best solution then would be these styles in the parent:

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
See more replies

i always do

margin: auto;