Centering Elements with Flexbox

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:

• Instgram > @samanthaming
• Twitter > @samantha_ming

---

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

Comments

[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;
}

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.

[Samantha Ming]

Super cool! Thanks for sharing! 🤩

[Ryan Smith]

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

[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

[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...

[Samantha Ming]

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

[Abdullah Furkan Özbek]

That sounds amazing

[Abdullah Furkan Özbek]

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

[Samantha Ming]

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

[Abdullah Furkan Özbek]

I will 😅

[Lucas H.]

Thank you! <3

[Samantha Ming]

You’re welcome 😊

[Tineyi Takawira]

Thanks for this!

[Samantha Ming]

You’re welcome! 😊