DEV Community

Antonio Radovcic
Antonio Radovcic

Posted on

Which way of centering via Flex do you prefer?

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

Top comments (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

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

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!