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. Janovský »
Verwandte Beiträge
- CSS-»Faux Columns« bzw. »Unechte Spalten« auf deutsch
- IE verdoppelt margin eines Floats in float-Richtung - was man dagegen tun kann
- Firefox CSS-Viewer: Blick hinter die Kulissen
- CSS-Schiebetürnavigation
- YAML - Clearing von Fließumgebungen mit .floatbox
- CSS - Geheimnisse gelüftet
- Min-width-Lösung für den Internet Explorer mit purem CSS - von Stu Nicholls




