DEV Community

Centering Elements with Flexbox

Samantha Ming on August 26, 2019

The biggest CSS headache is "How do I vertically center something". Throw away your migraine pills, it's now been solved with Flexbox! .parent...

You have different ways to handle this, I'll give you a cool tip:

.fully--centered { display: flex; place-content: center; place-items: center; }

this is equal to:

.fully--centered { display: flex; align-content: center; justify-content: center; align-items: center; justify-items: center; }

But with less css, this is cool when you have to define different complex flexbox layouts, and you want to save some lines of css.

CONS: obiviously IE doesn't support this shorthand.

Super cool! Thanks for sharing! 🤩

Thanks for the tip, I did not know about the place- shorthands!

Thanks for the tip!!! I didn't know place- before. A note for developers who are still working on IE - it doesn't support on either Edge or IE

I know this is a big mess, but fortunately I've maded a mixin to handle this:

Whoa!! Nice one! I’ll add this to the code notes 👏 thanks for sharing 😊

That sounds amazing

That's great Samantha. Flexbox is really amazing to learn.

Absolutely! I think it’s a must know at this point! 😄 Hope you will be following the new series! 😆

I will 😅

Thank you! <3

You’re welcome 😊

Thanks for this!

You’re welcome! 😊