Discussion on: Centring the item with two lines of code

[L]

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]

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

[RVxLab]

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

[akowalska622]

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

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

[akowalska622]

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

[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!