Skip to content

Center an element with CSS Grid

twitter logo github logo ・1 min read  

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.

twitter logo DISCUSS (5)
markdown guide

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. πŸ––πŸ»


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


It's not uncommon to go a week without a developer complaining

One negation too much?

Classic DEV Post from Jun 9 '19

Top 5 Soft Skills for Software Engineer

Soft skills are as critical as technical skills for a software engineer. No one works in isolation. Each person has to deal with teammates, colleagues, managers, etc. Therefore team interpersonal skills are essential too. Soft skills include things like good communication, honesty, teamwork, integrity, organization, empathy, etc.

Alex Carpenter profile image
I am a self taught developer that works best when floating in between design and engineering teams. I enjoy sharing what I know via short instructional screencasts and the occasional written post.

Be a better developer. Free forever.