Discussion on: Centering Elements with Flexbox

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

[Ryan Smith]

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

[Abdullah Furkan Özbek]

That sounds amazing

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

[Samantha Ming]

Super cool! Thanks for sharing! 🤩