loading...

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

@samanthaming

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

Discussion

pic
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:

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

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! 😊