DEV Community

Centring the item with two lines of code

Joanna Otmianowska on April 20, 2021

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

Read full post

L • Apr 20 '21 • Edited

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

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

But yeah, the grid solution is much better

akowalska622 • Apr 20 '21

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

L • Apr 20 '21

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 :)

akowalska622 • Apr 20 '21

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

RVxLab • Apr 20 '21

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

akowalska622 • Apr 20 '21

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

Joanna Otmianowska • Apr 21 '21

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

Chittoji Murali Sree Krishna • Apr 21 '21

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 */
}

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%);
}

Comment deleted

Joanna Otmianowska • Apr 22 '21

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?