DEV Community

Joanna Otmianowska
Joanna Otmianowska

Posted on

Centring the item with two lines of code

#css #webdev #frontend #grid

Do you remember centring the item on the screen horizontally and vertically the old way? Before flexbox and CSS grid that was really hard to do it. I usually either relied on the numbers (so defining margin or padding for the item - which is not good idea cause it looks different on different screens) or used floating. There was also a way with creating tables and putting your content there. I won't give any examples in code here not to misguide anyone looking for the solution to that. These old ways are really outdated.

When flexbox came around couple years ago it was like a miracle. Finally being able to center the item with three lines of CSS code felt like a dream to me. It was simple:

  display: flex;
  justify-content: center;
  align-items: center;
Enter fullscreen mode Exit fullscreen mode

I used this way very often. Till recently when I discovered simplest way thanks to Chris' Ferdinandi Daily Developer Tips.

Brace yourself, here it comes:

  display: grid;
  place-content: center;
Enter fullscreen mode Exit fullscreen mode

That's it. Isn't it awesome? I found it on this site that Chris shared. That's a really cool project done by Stephanie Eckles. She shares short and simple CSS code snippets. I highly recommend to check it out.

Top comments (19)

Collapse
 
signo profile image
L • • Edited

in a container with position: relative you can also use:

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
}
Enter fullscreen mode Exit fullscreen mode

But yeah, the grid solution is much better

Collapse
 
joannaotmianowska profile image
Joanna Otmianowska •

I don't know with trick with transform but as mentioned in comments, it looks like a hack before flex era :) Still, very interesting!

Collapse
 
akowalska622 profile image
akowalska622 •

Isn't it this mentioned "old way"?
Just out of curiosity

Collapse
 
signo profile image
L •

the post didn't mention the transform: translate(x%) trick but other (even older) ways:

I usually either relied on the numbers (so defining margin or padding for the item - which is not good idea cause it looks different on different screens) or used floating. There was also a way with creating tables and putting your content there.

ps: I still use the transform trick sometimes :)

Thread Thread
 
akowalska622 profile image
akowalska622 •

I also sometimes do :) I was just wondering, thanks for claryfing :D

Collapse
 
rvxlab profile image
RVxLab •

This is 100% the old way. Pre-flexbox that was one of the only ways to do it reasonably well.

Thread Thread
 
akowalska622 profile image
akowalska622 •

Thanks! Thought so. So it was actually mentioned in the article, that this way using grid is the alternative to the old ways.

Collapse
 
cmuralisree profile image
Chittoji Murali Sree Krishna •

Hmm but you can't make them vertically center, until unless you define the height for the element,

.container{
    display: grid;
    place-items: center;
    height: 100vh; /* 100vh is too much, 
    but it's an example */
   /* by default html elements won't 
   have height so we have to decide the 
   height so that we can vertically center */
}
Enter fullscreen mode Exit fullscreen mode

It's common for both flex and grid templates, but for postion we won't need it, as by default it takes entire screen width and height, until unless we provide the parent tag with a
position: relative;

.container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
filatovv profile image
Yuri Filatov •

Nice

Collapse
 
joannaotmianowska profile image
Joanna Otmianowska •

thanks!

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
joannaotmianowska profile image
Joanna Otmianowska •

Yes, that's true. But I guess first version with flex would work here so setting both align-items and justify-content to center, what do you think?

Collapse
 
sergeyie profile image
Sergey Ieffe •

This will add some definite. However there could be more css needed to align multiple items vertically inside the same div. This wouldn't be a difficult, but still requires some more code.

Thread Thread
 
joannaotmianowska profile image
Joanna Otmianowska • • Edited

You're right, I didn't noticed that you mentioned vertical centring. That would require more work than 3 lines indeed

Collapse
 
anikcreative profile image
Anik • • Edited

Very nice, lol, I was not expecting that — and thanks for that site you linked!

*Edit: I'm cracking up over "Smol" CSS xD

Collapse
 
joannaotmianowska profile image
Joanna Otmianowska •

Thanks! Yes, Smol CSS site is awesome :)

View full discussion (19 comments)

Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more

Read next

alvaromontoro profile image

Halloween, (CSS) Masks, and Logic Gates

Alvaro Montoro -

saurabhkurve profile image

Microservices with SpringBoot 🔥

Saurabh Kurve -

babar_ali profile image

Blur Card Effect

babar ali -

angelaswift profile image

Software for MacOS Developers that cannot Miss, Once More

Angela Swift -