Hacker News new | ask | show | jobs
by Taig 2014 days ago
Unlike the other methods, absolute positioning + translating has the advantage that you can not only center the child, but give it a percentage position within its dynamic parent. This can be especially useful when the position should be animated.

https://medium.com/swlh/dynamically-position-and-center-an-h...

1 comments

Big caveat, this only works when the container has a defined size as you are removing the centered child from element flow
I think as late as 2005 there were moments where I just said "screw this I'm using a table" while everyone screamed about how that's semantically wrong and what you really need is an elaborate series of hacks and misuse of CSS properties.

Flex and grid was the moment I cared about doing things right. Even now I use grid a lot because I find it works as well in 3d as 2d and I get CSS disciples trying to correct me.

It definitely isn't as versatile as the champions of centering from OP's article. But it's a related use case that the other techniques cannot solve. And of course the approach can be varied to some extend: https://jsfiddle.net/31gftbxs/