DEV Community

loading...
Cover image for This one line CSS can centre object easily: Putting end to your Google search

This one line CSS can centre object easily: Putting end to your Google search

rahxuls profile image Rahul ・1 min read

It's hard to centre thing in CSS. Most of the newbie web dev students face the problem and often search every time when on any project.
Here is the last and final solution to it. That is centring the object with just one line of CSS code.


The place-items property.

->The place-items property in CSS is shorthand for the align-items and justify-items properties, combining them into a single declaration. These properties have gained use with the introduction of Flexbox and Grid layouts

First, make sure to set the display property to grid and then, set the place-items property to centre.

div {
   display: grid; 
   place-items: center;
}
Enter fullscreen mode Exit fullscreen mode

Ta-Da DONE✨🎉🎉🎊 !!!

Thanks For Reading.

I mostly do my project using this only. I hope you will find this helpful as I did. Sorry if it doesn't work with you. (it will work chill ✨🎉)

Discussion (1)

pic
Editor guide
Collapse
pavelloz profile image
Paweł Kowalski • Edited

I prefer flexbox + justify-items: center ;)

Probably more browser support than grid