Yet another way to center an (absolute) element | CSS tricks

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

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

Why? Well, that needs a longer answer.

In recent years, CSS has brought many new features that don’t necessarily allow us to do new things, but certainly make them easier and simpler. For example, we no longer need to hardcode indexes:

In plaats daarvan wordt dit alles samengevat in de broer/zus-index() And sibling-count() functions. There are many recent examples like this.

Yet there is one small task that gives the feeling that we have been doing the same thing for decades: centering an absolutely positioned elementwhich we usually achieve as follows:

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  
  translate: -50% -50%;
}

We move the top left corner of the element to the center and then translate it back by 50% so that it is centered.

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 any way? Well, there is another, not so well-known cross-browser way to not only center, but also easily place any absolutely positioned element. And what's best: it reuses the familiar align-self And justify-self properties.

Turns out that these properties (along with their place-self shorthand) are now working on absolutely positioned elements. However, if we try to use them as they are, we will find that our element does not even flinch.

/* Doesn't work!! */
.element {
  position: absolute;
  place-self: center; 
}

So, how do you do that? align-self And justify-self work for absolute elements? It might be obvious to say that they have to align the element, and that is true, but specifically, they align it within its Inset-modified containing block (IMCB). Okay… But what is the IMCB?

Imagine we set our absolute element width And height Unpleasant 100%. Even if the position of the element is absolute, it certainly does not grow infinitely, but is enclosed by what is known as the containing block.

The containing block is the closest ancestor with a new block context stacking. By default this is the html element.

We can modify that containing block using inset properties (specific top, right, bottomAnd left). That's what I always thought inset properties fixed the corners of the element (I even said it a few seconds ago), but under the hood we are actually fixing the IMCB boundaries.

By default, the IMCB is the same size as the element dimensions. So before, align-self And justify-self tried to center the element within itself, to no avail. Then our final step is to set the IMCB to be the same as the containing block.

.element {
  position: absolute;
  place-self: center; 
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Or use them inset abbreviation:

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

Only three lines! A win for CSS nerds. Granted, I may be cheating, because in the old way we also get the inset property and reduce it to three lines, but... let's ignore that fact for now.

We are not limited to just centering elements, but everything else align-self And justify-self positions work fine. This provides a more idiomatic way to position absolute elements.

For a tip: If we want to leave a space between the absolutely positioned element and the block containing it, we can add a margin to the element or set that of the container inset at the desired distance.

I checked which is best Caniusand while Safari didn't seem to support it initially, in testing it seems to work in all browsers!