"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: Instead, all this is condensed into the sibling-index() and sibling-count() functions. There are lots of recent examples like this."
"So, how do align-self and justify-self work for absolute elements? It may be obvious to say they should align the element, and that's true, but specifically, they align it within its Inset-Modified Containing Block (IMCB). Okay... But what's the IMCB? Imagine we set our absolute element width and height to 100%. Even if the element's position is absolute, it certainly doesn't grow infinitely, but rather it's enclosed by what's known as the containing block."
"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; } There is nothing wrong with this way - we've been doing it for decades. But still it feels like the old way. Is it the only way? Well, there is another not-so-known cross-browser way to not only center, but also easily place any absolutely-positioned element."
Modern CSS enables centering absolutely-positioned elements more simply than traditional methods. The `align-self` and `justify-self` properties now work on absolutely-positioned elements by aligning them within their Inset-Modified Containing Block (IMCB). When `inset: 0` is set, it establishes boundaries that allow `place-self: center` to function properly. This approach condenses the centering process into three lines of CSS: `position: absolute`, `place-self: center`, and `inset: 0`. This method works across all browsers and represents how recent CSS features simplify common tasks without enabling entirely new capabilities.
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]