TL;DR: We are able to middle absolute-positioned components in three traces of CSS. And it really works on all browsers!
.factor {
place: absolute;
place-self: middle;
inset: 0;
}Why? Nicely, that wants an extended reply.
In recent times, CSS has introduced numerous new options that don’t essentially permit us to do new stuff, however actually make them simpler and less complicated. For instance, we don’t should hardcode indexes anymore:
As an alternative, all that is condensed into the sibling-index() and sibling-count() capabilities. There are many latest examples like this.
Nonetheless, there may be one little process that looks like we’ve doing the identical for many years: centering a fully positioned factor, which we normally obtain like this:
.factor {
place: absolute;
prime: 50%;
left: 50%;
translate: -50% -50%;
}We transfer the factor’s top-left nook to the middle, then translate it again by 50% so it’s centered.
There's nothing incorrect with this manner — we’ve been doing it for many years. However nonetheless it feels just like the previous approach. Is it the solely approach? Nicely, there may be one other not-so-known cross-browser method to not solely middle, but in addition simply place any absolutely-positioned factor. And what’s finest, it reuses the acquainted align-self and justify-self properties.
Seems that these properties (together with their place-self shorthand) now work on absolutely-positioned components. Nonetheless, if we attempt to use them as is, we’ll discover our factor doesn’t even flinch.
/* Would not work!! */
.factor {
place: absolute;
place-self: middle;
}So, how do align-self and justify-self work for absolute components? It might be apparent to say they need to align the factor, and that’s true, however particularly, they align it inside its Inset-Modified Containing Block (IMCB). Okay… However what’s the IMCB?
Think about we set our absolute factor width and top to 100%. Even when the factor’s place is absolute, it actually doesn’t develop infinitely, however fairly it’s enclosed by what’s referred to as the containing block.
The containing block is the closest ancestor with a brand new stacking context. By default, it's the html factor.
We are able to modify that containing block utilizing inset properties (particularly prime, proper, backside, and left). I used to suppose that inset properties fastened the factor’s corners (I even mentioned it a few seconds in the past), however below the hood, we are literally fixing the IMCB borders.
By default, the IMCB is identical dimension because the factor’s dimensions. So earlier than, align-self and justify-self had been attempting to middle the factor inside itself, leading to nothing. Then, our final step is to set the IMCB so that it's the identical because the containing block.
.factor {
place: absolute;
place-self: middle;
prime: 0;
proper: 0;
backside: 0;
left: 0;
}Or, utilizing their inset shorthand:
.factor {
place: absolute;
place-self: middle;
inset: 0;
}Solely three traces! A win for CSS nerds. Admittedly, I is perhaps dishonest since, within the previous approach, we might additionally use the inset property and cut back it to 3 traces, however… let’s ignore that truth for now.
We aren’t restricted to only centering components, since all the opposite align-self and justify-self positions work simply superb. This affords a extra idiomatic method to place absolute components.
Professional tip: If we wish to depart an area between the absolutely-positioned factor and its containing block, we might both add a margin to the factor or set the container’s inset to the specified spacing.
What’s finest, I checked Caniuse, and whereas initially Safari didn’t appear to help it, upon testing, it appears to work on all browsers!
