DEV Community

Alex Carpenter
Alex Carpenter

Posted on

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;
}
Enter fullscreen mode Exit fullscreen mode

It's beautiful.

Top comments (6)

Collapse
 
equinusocio profile image
Mattia Astorino • Edited

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. 🖖🏻

Collapse
 
hybrid_alex profile image
Alex Carpenter

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

Collapse
 
equinusocio profile image
Mattia Astorino

Yes. But let others learn something :)

Collapse
 
hybrid_alex profile image
Alex Carpenter

Yup 🤷‍♂️

Collapse
 
ohbob profile image
Roberts Ozoliņš

Thanks!