@micahlt | wasteof.money 4

@oren

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

May 13, 2022, 8:16 PM

3 1 13

comments (single view)

View parent

@micahlt May 14, 2022, 4:02 AM

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

@riverbox May 14, 2022, 11:36 AM

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

@micahlt May 14, 2022, 4:24 PM

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

@oren May 14, 2022, 2:07 PM

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

@oren May 14, 2022, 2:07 PM

formatting be like

@micahlt May 14, 2022, 4:25 PM

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;

@oren May 14, 2022, 6:28 PM

that works, thanks

@doubledenial May 14, 2022, 11:56 PM

That’s my go-to solution for total centering

@micahlt May 15, 2022, 2:55 AM

It's definitely the cleanest way if you don't want to take elements out of the layout flow :)

View all comments