Objekte mittels CSS zentral zum Viewport positionieren

Gelegentlich möchte man Seiteninhalte genau im Mittelpunkt des Anzeigebereichs platzieren. Dafür bieten sich beispielsweise Bilder, Div-Container, iFrames oder andere HTML-Elemente an. CSS bietet dafür keine direkte Möglichkeit, wie etwa container:middle;. Um Inhalte innerhalb eines Block-Elements zu zentrieren greift der altbekannte Trick margin: 0 auto;. Jedoch nur horizontal. Für die mittige Fixierung im Viewport funktioniert dies allerdings nicht so recht. Die Lösung ist unflexibel, fehleranfällig und unzuverlässig. Daher muss ein anderer Ansatz her. Dieser existiert eigentlich auch, hat aber hinsichtlich responsivem Webdesign gewisse Nachteile, welche es zu beseitigen gilt.

Harte Positionierung durch negative Abstände

div {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -50px;
  width: 100px;
  height: 200px}

Wie funktioniert das Ganze? Das Objekt wird von links und oben jeweils um 50 Prozent von den Rändern weggeschoben. Die Absolute Positionierung gestattet top, left usw. Mittig ist das aber keineswegs. Entscheidend sind jetzt Höhe und Breite des Containers. Diese müssen beide feste Werte haben. Also keine Prozentangaben. Von beiden Werten nimmt man jeweils die Hälfte und setzt entsprechend die Außenabstände negativ hinzu. Dabei bestimmt ein negativer linker Abstand die Breite und der obere folglich die Höhe. Okay, klappt. Bedingt, denn sobald ihr den Viewport ändert verschiebt sich alles, teilweise unschön. Responsive ist das auch nicht gerade. Ebenso wenig Erfolg versprechend sind negative Prozente der Abstände. Vergesst die Geschichte mit margin-... am besten gleich wieder. Wir brauchen eine andere Eigenschaft um unser Ziel zu erreichen. Das CSS3-Attribut transform führt vielleicht zum Erfolg.

Flexible Platzierung über CSS-Transform

div {
position: absolute;
top: 50%;
left: 50%;
width: 60%;
height: 40%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
zusätzliche Formatierungen ...}

In diesem Beispiel existieren keinerlei statische Werte. Höhe und Breite sind variabel definiert und lassen problemlos eine Viewport-Änderung zu. Durch transform: translate(-50%, -50%); wird der Container genau in die Mitte des Anzeigebereichs gebracht. Selbst bei Größenveränderungen passt sich die Box entsprechend dem Viewport an. Für die Breite könnte beispielsweise auch ein fester Wert gewählt werden, allerdings sollte rechtzeitig ein Media Query auf Prozent umstellen. Ansonsten ist diese Option nicht mehr ausreichend flexibel. Ihr könnt euch meine neu gestaltete 404 Fehlerseite als Live-Preview anschauen. Dort habe ich genau diese Lösung angewannt.

GFX-Stylez.blog 404 Fehlerseite
GFX-Stylez.blog 404 Fehlerseite

Das Transform-Attribut ermöglicht neben dieser prima Option weitere fantastische Features, zum Beispiel: 3D-Verschiebungen, Rotationen, Skalierungen und vieles mehr. CSS3 gefällt mir immer besser. In den letzten paar Jahren hat sich Webgestaltung grundlegend verändert. Zum einen durch mobile Geräte und gleichermaßen durch neue Funktionen.


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

7 Kommentare

Du kannst diesen Artikel nicht mehr kommentieren.

  1. Kommentar von Johannes · · #

    Hallo Markus,

    seit Wochen suche ich nach einer sinnvollen und funktionierenden Lösung Bilder Mittig zum Viewport zu Zentrieren.

    In keinem anderen Forum oder Blog konnte ich eine vernünftige Antwort auf mein Problem finden, obwohl viele scheinbar das selbe Problem haben.
    Ich sah mich schon gezwungen das Bild mit javascript zu zentrieren, aber auch das war nur buggy und nervig.

    Die Flexible Platzierung über CSS-Transform ist die Lösung die ich mir schon ewig ersehnt habe.
    Beinahe PERFEKT!

    Einziges Manko: Diese Art der Zentrierung ist so gut wie gar nicht abwärts-kompatibel, im Internet-Explorer (ich habe die Version 8) kommt wieder mal nur Blödsinn raus :(

  2. Kommentar von reraiseace · · #

    Hallo Johannes,
    du hast Recht, die Lösung ist lediglich in neueren Browsern lauffähig. Allerdings könntest du bei Internet Explorer 8 und niedriger auf Conditional Comments setzen und dabei anstelle von CSS-Transform die bekannte Margin-Variante mit fester Breite und Höhe verwenden. Das tut an dieser Stelle nicht so weh, wenn es nicht 100% responsive ist. Das Bild bleibt bis zu einer gewissen Auflösung mittig. Bei Firefox und Chrome schaut’s dagegen besser aus, vor allem wegen der Vendor-Präfixe. Schau mal bei Can I Use.

  3. Kommentar von Zanaxhir · · #

    Gibt es auch eine Möglichkeit wenn die Seite in einem Iframe ist das über den Viewport(z.B. 2000px Höhe) hinaus geht, das ganze in der Mitte zu des Viewports zu halten?
    Bei einer normalen Seite würde ich es so machen wie du nur mit Position Static statt Absolute.
    Aber bei einem Iframe?

  4. Kommentar von Zanaxhir · · #

    Fixed nicht Static meinte ich

  5. Kommentar von reraiseace · · #

    Meinst du jetzt den Inhalt innerhalb des iframes oder den iframe selbst?

  6. Kommentar von Zanaxhir · · #

    Eine Lightbox innerhalb des Iframes.
    Zurzeit hab ich das mit JavaScript und messangern zwisch Parent und iframe gelöst

  7. Kommentar von reraiseace · · #

    Den iframe kannst du auf jeden Fall mit dieser Methode ausrichten. Aber innerhalb des iframes klappt das so leider nicht.