DEV Community

Samantha Ming
Samantha Ming

Posted on

Centering Elements with Flexbox

CodeTidbit by SamanthaMing.com

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

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

Keeping this code note super short. Because I'll be spending the entire next month posting about Flexbox on my Twitter and Instagram Account!

The series is called #Flexbox30. You will learn flexbox in 30 days with 30 code tidbits. You heard that right, a new code tidbit every day for 30 days 💪 It starts September 1st 🔥

If you're interested in this FREE series, make sure you follow me on:


Thanks for reading ❤
Say Hello! Instagram | Twitter | Facebook | Blog | SamanthaMing.com

Discussion (14)

Collapse
nicolalc profile image
Nicola

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

Using place-[what] instead of align and justify:

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

Enter fullscreen mode Exit fullscreen mode

this is equal to:

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

Enter fullscreen mode Exit fullscreen mode

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.

Collapse
samanthaming profile image
Samantha Ming Author

Super cool! Thanks for sharing! 🤩

Collapse
ryansmith profile image
Ryan Smith

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

Collapse
mingyena profile image
Rae Liu

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

Collapse
nicolalc profile image
Nicola

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

dev.to/nicolalc/a-mixin-to-rule-th...

Thread Thread
samanthaming profile image
Samantha Ming Author

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

Collapse
afozbek profile image
Abdullah Furkan Özbek

That sounds amazing

Collapse
afozbek profile image
Abdullah Furkan Özbek

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

Collapse
samanthaming profile image
Samantha Ming Author

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

Collapse
afozbek profile image
Abdullah Furkan Özbek

I will 😅

Collapse
lucashogie profile image
Lucas H.

Thank you! <3

Collapse
samanthaming profile image
Samantha Ming Author

You’re welcome 😊

Collapse
codebrotha profile image
CodeBrotha • Edited

Thanks for this!

Collapse
samanthaming profile image
Samantha Ming Author

You’re welcome! 😊