Hacker News new | ask | show | jobs
by ilaksh 1849 days ago
To me you proved the point. Centering with Flexbox requires styling the parent and they use two different properties for horizontal and vertical centering.

Truly simple to me would not be CSS but rather an attribute on the element. But with CSS, the simplest thing would allow one to just put a style on the element you want to center.

The other aspect of this is that there are multiple other ways of doing it.

1 comments

> Centering with Flexbox requires styling the parent and they use two different properties for horizontal and vertical centering

It does require styling the container, to specify that a new layout system (Flex or Grid) is to be used instead of the default. While it's useful to have separate properties for the two directions, you can also use a single shorthand property to set both at once:

  .container {
    display: flex;
    place-content: center;
  }
Alternately, use only Grid on the parent and place-self on the child.

  .container {
    display: grid;
  }

  .child {
    place-self: center;
  }