Inhalte zentrieren mit CSS

Zwei Möglichkeiten, Inhalte mit CSS zu zentrieren:

Inhalt mit flexibler Breite innerhalb des Bodys horizontal zentrieren (z.B. die Inhalte einer Website mittig ausrichten):

HTML:
<html>
 <head>...</head>
 <body>
  <div id="inhalt"></div>
 </body>
</html>
CSS:
body {
	text-align:center; /* für den IE */
}
#inhalt {
	margin:0 auto;
}

Beliebiges Element mit fester Breite innerhalb eines anderen Elements oder des Bodys horizontal und vertikal zentrieren:

HTML:
<div id="rahmen">
 <div id="centerbox"></div>
</div>
CSS:
#centerbox
      {
      position: absolute;
      width: 200px;
      height: 200px;
      left: 50%;
      top: 50%;
      margin-left: -100px; /* Hälfte der Breite */
      margin-top: -100px;  /* Hälfte der Höhe */
      }

Ausführlichere Erklärungen »
Und auch auf deutsch »
CSS – vertikal zentrieren – Lösung von D. Janovski »


Kommentar schreiben

* Pflichtfelder