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

Top comments (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
Tineyi Takawira • Edited on

Thanks for this!

Collapse
 
samanthaming profile image
Samantha Ming Author

You’re welcome! 😊

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠