Centering Elements with Flexbox

samanthaming profile image Samantha Ming ・1 min read

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;

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

Posted on by:

samanthaming profile

Samantha Ming


Frontend Developer sharing weekly JS, HTML, CSS code tidbits 🔥Discover them all on samanthaming.com 💛


Editor guide

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;

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.


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


Super cool! Thanks for sharing! 🤩


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'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! 😆


You’re welcome 😊


Thanks for this!


You’re welcome! 😊