CSS-Tricks: Wie man absolut positionierte Elemente auf der Seite zentriert

Ab und zu kommt man in die Situation, dass man absolut positionierte Container/Elemente zentrieren muss. Die Lösung dieses Problems ist denkbar einfach, wenn man einmal das Prinzip dahinter verstanden hat.

Wie zentriere ich absolut positionierte Elemente?

<div id=“absolut-zentriert“>Inhalt</div>

#absolut-zentriert {
position:absolute;
width:500px;
left:50%;
margin-left:-250px; /* Halbe Breite des Elements */
}