Center an element with CSS Grid

It's not uncommon to go a week without a developer complaining on Twitter about how hard it is to center an element using CSS.

Here it is, two lines of CSS to center an element within its parent.

.parent {
  display: grid;
  place-items: center;
}

It's beautiful.

Comments

[Mattia Astorino]

Place-items is just a shorthand of justify-items and align-items which work both with flexbox and grid layout. You should give more details next time. 🖖🏻

[Alex Carpenter]

Sure, it wasn't the most comprehensive post, but it does what is described.

[Mattia Astorino]

Yes. But let others learn something :)

[Alex Carpenter]

Yup 🤷‍♂️

[Roberts Ozoliņš]

Thanks!