DEV Community

Discussion on: Centering Elements with Flexbox

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
ryansmith profile image
Ryan Smith

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

Collapse
afozbek profile image
Abdullah Furkan Özbek

That sounds amazing

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
samanthaming profile image
Samantha Ming Author

Super cool! Thanks for sharing! 🤩