CSS: Bild mittig ausrichten – horizontal und vertikal zentriert

Manchmal möchte man Bilder mittig ausrichten, was nicht unbedingt schwer ist. Jedenfalls in der horizontalen. Vertikal mittig positionieren ist da meist eher ein Problem.
Ich möchte mit verschiedenen Methoden zeigen, wie ein Bild in beiden Richtungen zentriert werden.

So soll es aussehen:

Wenn Bild als IMG-Element vorliegt:

HTML:

<div id="dieBox">
<img width="100" height="100" src="bild.jpg" />
</div>

CSS:

#dieBox
{
width: 150px;
height: 150px;
}
 
#dieBox img
{
display:block;
margin: 25px auto 25px auto;
}

Wichtig dabei ist das margin. 25 Pixel gibt an, das dieses Bild 25 Pixel von oben und unten Abstand nehmen soll. Das Bild im Beispiel ist also 100 Pixel breit und hoch.

Reine CSS Lösung ohne nachrechnen

HTML:

<div id="dieBox">
Darin ist auch das Bild..
</div>

CSS:

#dieBox
{
width: 250px;
height: 250px;
background-image: url('bild.jpg');
background-repeat: no-repeat;
background-position: center center;
}

Es wird unter Bild geladen und das Element worin es sitzt, auf absolute Größe angepasst. Als Position bekommt es in der horizontalen und vertikalen den center Wert.