Using auto margins to center vertically | #shorts

While we can vertically center items with align-items: center on the parent, or align-self: center; on the child, this only works if the flex-direction is row. If we change that to column, it's no longer vertically centered.

One of the nice things with flexbox (and grid!) is that margin-top: auto and margin-bottom: auto work like left and right, so we can use that to center things vertically regardless of the flex-direction.

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[StingBear]

Imagine a world where vertical-align just... worked.

[AmodeusR]

I can't express how much this short videos save so much time xD I've been saved by them multiple times, please keep doing more of them!

[TC-mbpw]

I usually use align-items:center with display:flex to centre things vertically, ie use flexbox's own properties

[michaelsiddiqi]

This was super valuable. Thanks Kevin!

[iPocketz]

Thank you so much! I've been trying to figure out why an element wasn't centering for the past hour. display: flex; parent element was a life saver!!!

[BenHewart]

I absolutely love these little tips!, I just want to say thank you as well as I have learned loads watching your videos! I'm really appreciative of all your hard work. Thank you

[alvaroprietovideos]

this kind of short videos are really useful

[CaerelsJan]

I like these shorts. More of these please!

[ZackPyle]

So is there any advantage/disadvantage to using margin:auto vs align-items and justify-content if you are both vertically and horizontally centering something within a flex parent?

[eip]

awesome stuff🙌🏼. By the way, I played with it and rather of using display flex. I used display grid + place-content center, and removed the margin auto from the child element. The outcome looks cool xD

[osho]

Thanks man, I keep having this issue always wondered what I was doing wrong.

[jammincoder]

Can't believe I didn't know that! Thanks!

[pohanggg]

As a newbie, I used to casually set the height by 100vh to make it vertically centered, yet I didn't think that was the most convenient way. Yet I have never known about flex or grid before.

[jibaromar]

Was waiting for it. Had enough of justify-content and align-items Thanks a lot.

[sheldonfourie]

Could you do a css trick on an h1 or p tag having a box border around it without the letter y or g falling out the box?

[Flohhupper]

display: grid;
place-items: center;

:)

[alanklm]

is it a "tip of every day" now?

[KentaroxKondo]

Then you can use align-items: center, right?

[RavindraSDhande]

Hi Kevin, i tried this in Divi Section, Row, Modules but this did not work. I gave the row display:flex, and the text module margin:auto but it only center aligned the text module, but not vertically... how to get this in DIVI...

[felix]

cant we do
box{
display:flex;
align-items:center;
justify-content:center;
}

please correct me if i am wrong.