Veit Schiele Communications

Veit Schiele Communications

Horizontale und vertikale Zentrierung

erstellt von Veit Schielezuletzt verändert: 19.03.2017 15:15 © Veit Schiele Communications GmbH, 2007–2017
.absolute-center {
    position: absolute;
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
}

Note

Funktioniert nicht auf Windows Phone

…innerhalb eines Containers

Der umgebende Container benötigt eine feste Größe:

.container {
    height: 346px;
}

… innerhalb des Viewports

.absolute-center {
    position: fixed;
    …
}

Bilder

Bei Bildern sollte sich die Höhe des Bilds automatisch anpassen:

img.absolute-center {
    position: absolute;
    margin: auto;
    width: 50%;
    height: auto;
    top: 0; left: 0; bottom: 0; right: 0;
}