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....
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
in a container with
position: relative
you can also use:But yeah, the grid solution is much better
I don't know with trick with
transform
but as mentioned in comments, it looks like a hack before flex era :) Still, very interesting!Isn't it this mentioned "old way"?
Just out of curiosity
the post didn't mention the
transform: translate(x%)
trick but other (even older) ways:ps: I still use the
transform
trick sometimes :)I also sometimes do :) I was just wondering, thanks for claryfing :D
This is 100% the old way. Pre-flexbox that was one of the only ways to do it reasonably well.
Thanks! Thought so. So it was actually mentioned in the article, that this way using grid is the alternative to the old ways.
Hmm but you can't make them vertically center, until unless you define the height for the element,
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;
Nice
thanks!
Yes, that's true. But I guess first version with flex would work here so setting both
align-items
andjustify-content
to center, what do you think?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.
You're right, I didn't noticed that you mentioned vertical centring. That would require more work than 3 lines indeed
Very nice, lol, I was not expecting that — and thanks for that site you linked!
*Edit: I'm cracking up over "Smol" CSS xD
Thanks! Yes, Smol CSS site is awesome :)