TL ; DR : We can center absolute-positioned elements in three lines of CSS. And it works on all browsers!

.element { position: absolute; place-self: center; inset: 0; }

Why? Well, that needs a longer answer.

In recent years, CSS has brought a lot of new features that don’t necessarily allow us to do new stuff, but certainly make them easier and simpler. For example, we don’t have to hardcode indexes anymore:

<ul style="--t: 8"> <li style="--i: 1"></li> <li style="--i: 2"></li> <!-- ... --> <li style="--i: 8"></li> </ul>

Instead, all this is condensed into the sibling-index() and sibling-count() functions.…