HTML-Element horizontal und vertikal im Browser zentrieren mit jQuery

Horizontal und vertikal zentriertes DIV mittels jQuery

Gerade bei kleinen Sites oder Webvistenkarten ist es hin und wieder gewünscht, den Inhalt sowohl horizontal als auch vertikal im Browserfenster zu zentrieren. Während sich die horizontale Zentrierung heute in allen Browsern recht einfach via margin-left:auto und margin-right:auto im CSS realisieren lässt, ist die vertikale Zentrierung so einfach nicht möglich.

Eine oft empfohlene Lösung hierfür ist die absolute Positionierung in Kombination mit negativen Margins (Außenabstände) oben und links, z.B. so:

#centered{
  width: 800px;
  height: 600px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -400px;
  margin-top: -300px;
}

Im obigen Beispiel wird ein DIV (oder ein anderes Block-Element) mit der ID „centered“ auf 800×600 Pixel gebracht, dessen oberen linke Ecke in der Mitte des Bildschirms ausgerichtet und anschließend über die Definition negativer Margins um die halbe Elementbreite und -höhe in die tatsächliche Mitte verschoben. In der Mitte des Browserfensters ist dann also nicht mehr die obere linke Ecke des Elements sondern die Mitte des Elements selbst. Das funktioniert soweit auch ganz prima, hat aber einen entscheidenden Nachteil: Wird das Browserfenster zu klein, wandern Teile des so zentrierten Elements links und/oder oben aus dem Viewport und sind dort auch via Scrollbalken nicht mehr erreichbar. Möchte man also ein besonders großes Element auf diese Weise zentrieren, läuft man Gefahr, dass Teile des Inhalts für Nutzer mit kleinen Bildschirmen bzw. geringen Auflösungen nicht mehr zugänglich sind.

Zentrierung mittels jQuery

Ein Lösungsansatz in jQuery für die gegebene Aufgabenstellung stammt im Original von Martin Angelov und kann hier nachgelesen werden: http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/. Diese Lösung hat bei der Zentrierung eines Elements im Browserfenster allerdings zunächst das gleiche Problem, wie ich es oben beschrieben habe – bei zu kleinem Browserfenster wandern Teile des Elements aus dem sichtbaren Bereich. Ich habe sein Skript also etwas geändert und dabei gleich um zwei Zusatzfunktionen erweitert: Es kann nun ein Mindest-Randabstand angegeben sowie ein Offset definiert werden, welches das Element vertikal etwas aus der rechnerischen Mitte verschiebt. Optisch wirkt ein 100%ig vertikal zentriertes Element nämlich oft als etwas zu tief sitzend. Hier das modifizierte Skript:

//Zu zentrierendes Element definieren
var CenterBox = '#centered';

//Mindest-Randabstand definieren
var MinimumMargin = 10;

//Vertikaler Offset (Pixel, um die das Element nach oben aus der Mitte verschoben wird)
var YOffset = 80;

//Ab hier sind keine weiteren Konfigurationen nötig
$(window).resize(function(){
    var leftmargin = parseInt(($(window).width() - $(CenterBox).outerWidth())/2);
    var topmargin = parseInt(($(window).height() - $(CenterBox).outerHeight())/2);

    //Vertikalen Offset anwenden
    topmargin = topmargin - YOffset;

    //Viewport Overflow verhinden, Mindest-Randabstand anwenden
    if(leftmargin <= MinimumMargin) {leftmargin = MinimumMargin;}
    if(topmargin <= MinimumMargin) {topmargin = MinimumMargin;}

    //Errechnete Werte anwenden
    $(CenterBox).css({
        position:'absolute',
        left: leftmargin,
        top: topmargin
    });
});
// Initialer Aufruf nach dem Laden der Seite
$(window).resize();

Mit dieser Methode lässt sich ein Element – in der Regel wird es ein DIV sein – komfortabel browserübergreifend sowohl horizontal als auch vertikal zentrieren. Durch die Angabe eines Mindest-Randabstandes wird dabei das Überlaufen aus dem sichtbaren Bereich des Browserfensters verhindert und auf kleinen Bildschirmen bleiben somit alle Inhalte zugänglich.

Was ist eigentlich jQuery?

Für Leser, die noch nie von jQuery gehört haben: jQuery ist ein beliebtes Javascript-Framework, das eine Vielzahl mächtiger Funktionen bereit stellt und so das browserübergreifende Entwickeln von Javascript-Anwendungen  erheblich vereinfacht. Vor dem Einsatz des oben beschriebenen Skripts zum Zentrieren von Elementen muss die jQuery-Bibliothek  zunächst in das Dokument geladen werden. Das geht am schnellsten über das CDN (Content Delivery Network) von Google. Dafür muss einfach folgende Zeile in das HTML-Dokument eingefügt werden (aktuelle jQuery-Version 1.9.0):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

Falls ihr eine andere oder bessere Lösung habt, freue ich mich über einen Hinweis in den Kommentaren.