CSS: vertikales und horizontales Zentrieren von Inhalten

In alten HTML-Zeiten hat man Inhalte noch über Frames oder auch Tabellen auf einer Webseite, sowohl horizontal, als auch vertikal zentriert. Da die Gestaltung und Anordnung von Webseiten nun vorwiegend mit CSS realisiert wird, braucht man manchmal ein paar besondere Kniffe, um bspw. Elemente/Inhalte auf einer Webseite zu zentrieren.

Vertikales Zentrieren

Die auf blog.themeforest.net beschriebenen Methoden eignen sich für verschiedene Anwendungsfälle. Möchte man beispielsweise ein Blockelement vertikal zentrieren, dann eignet sich die dort beschriebene Methode 3.

Hierbei wird ein <div> vor dem zu zentrierenden Block eingefügt. Dieses besitzt eine height:50%; und margin-bottom:- halfDivHeight;. Der eigentliche Inhalt enthält ein clear:both; und wird damit auf der halben Seitenhöhe positioniert.

HTML

<div id="floater"></div>
<div id="content">
   Inhalt
</div>

CSS

#floater {float:left; height:50%; margin-bottom:-120px;}
#content {clear:both; height:240px; position:relative;}

Vorteile

• Funktioniert in allen Browsern
• Wird die Seitenhöhe kleiner als die Höhe des Blockelements, dann wird der Inhalt nicht abgeschnitten, sondern durch den Scrollbalken scrollbar.

Nachteile

• Ein zusätzliches Blockelement wird benötigt (ist hier aber nicht ganz als Nachteil zu sehen)

Horizontales Zentrieren

Um ein Blockelement horizontal zu zentrieren, genügen wenige CSS-Eigenschaften. Einem Blockelement muss lediglich eine feste Breite zugewiesen werden und margin-left, sowie margin-right auf auto gesetzt werden.

HTML

<div class="centered">
   Inhalt
<div>

CSS

.centered { width:200px; margin-left:auto; margin-right:auto; }