DEV Community

loading...

Which way of centering via Flex do you prefer?

niorad profile image Antonio Radovcic ・1 min read

Given you want to center an element horizontally. Which one would you prefer?

.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

or

.parent {
  display: flex;
  justify-content: space-around;
}
Enter fullscreen mode Exit fullscreen mode

Discussion (5)

Collapse
anduser96 profile image
Andrei Gatej

I didn’t know about the second one, but I definitely should try it.

Speaking of flexbox, I just found out today that you can use place-items: center; in place of align-items: center; justify-content: center;.

Collapse
niorad profile image
Antonio Radovcic Author

Cool! That's new to me. Doesn't seem to be widely supported yet, unfortunately.

Collapse
joel profile image
Joel Krause

I’ve always used the first option but only because I didn’t know the second was possible 😂

Gonna give that one a go when I get a chance!

Collapse
niorad profile image
Antonio Radovcic Author

Oh yes, the space-arounds are all very useful, especially for nav-bars. I think the first way is more readable since "center" is clearer than "space-around", but I'm writing the second one by default, since it's shorter and in my thinking, I try to solve for horizontal spacing first.

Collapse
tstark2 profile image
Todd Stark II • Edited

I've always used the second one. It never even crossed my mind to use flex-direction for that.

I'm always happy to learn a new way to solve a problem. Thanks for bringing this up!

Forem Open with the Forem app