This article introduces a modern CSS technique to center absolute-positioned elements using just three lines of code.
- •The classic method uses top/left at 50% with translate(-50%, -50%) to offset the element back to center
- •The new approach combines place-self: center with inset: 0 on a position: absolute element
- •align-self and justify-self now work on absolutely-positioned elements, but only within the Inset-Modified Containing Block (IMCB)
- •By default, the IMCB matches the element's own dimensions; setting inset: 0 expands it to match the containing block
- •All other align-self and justify-self values (not just center) work with this technique, and it is supported across all major browsers
This summary was automatically generated by AI based on the original article and may not be fully accurate.
CSS-Tricks
WebKit