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

or

.parent {
  display: flex;
  justify-content: space-around;
}

Comments

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

[Antonio Radovcic]

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

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

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

[Todd Stark II]

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!