Kemmerzell.org


CSS: DIV-Container zentrieren

Von Maximilian · 23.02.2014 · Kategorie: CSS

Eine der häufigsten Aufgaben beim Erstellen einer neuen Internetseite ist das Zentrieren bestimmter Elemente oder der gesamten Website. Denn dafür gibt es nicht nur eine Menge Anwendungsfälle, sondern das Zentrieren von Elementen wird derzeit auch gerne zur Gestaltung eingesetzt. Doch wie zentriert man eigentlich komplette div-Container horizontal und auch noch vertikal?

Das ist eigentlich gar nicht so schwer und schnell umzusetzen. Denn dafür werden nur wenige Zeilen CSS-Code benötigt. Doch anfangs braucht man erstmal ein div-Element, das zentriert werden soll. Diesem verleihen wir in diesem Beispiel die Klasse zentrum, um ihm nachher die entsprechenden Eigenschaften zuweisen zu können. Dieser Container könnte umgesetzt in HTML-Code dann so aussehen:

Nun haben wir zwar einen Container mit Text, aber zentriert ist dieser noch nicht. Das kann man nun aber ganz einfach mit ein wenig CSS lösen. Dazu definieren wir erstmal die Positionierung, die Höhe und die Breite des Containers. Die Werte für die Höhe und die Breite kann man sich dabei natürlich beliebig aussuchen. Bis hierhin würde unser CSS-Code für die Klasse zentrum also folgendermaßen aussehen:

Jetzt wird das Element erst verschoben. Denn bisher befindet es sich noch immer in der linken oberen Ecke. Dazu wird nun der Abstand zum oberen und zum linken Bildschirmrand festgelegt. Diese Werte setzen wir beide auf 50 Prozent. Damit rutscht der div-Container nach unten. Mittig ist er aber noch immer nicht angeordnet. Denn ausgehend vom Mittelpunkt befindet er sich nun unten rechts. Jetzt sähe der CSS-Code jedoch so aus:

Um den Container nun abschließend wirklich zu zentrieren, muss ein negativer Einzug nach oben und nach links definiert werden. Dieser muss genau die Hälfte der Höhe bzw. der Breite des Containers betragen. Dadurch befindet sich der Mittelpunkt des Containers genau über dem Mittelpunkt der gesamten Website. Der negative Einzug nach oben entspricht dabei der halben Höhe und der negative Einzug nach links der halben Breite. Der CSS-Code für das zentrierte div-Element sieht letztendlich also so aus:

Mit diesen wenigen Zeilen Code kann man also ganz einfach einen gesamten div-Container horizontal und vertikal zentrieren. Dadurch kann man seine gesamte Website mittig darstellen. Und genau das kommt derzeit häufig zum Einsatz. Daher kann es nicht schaden, wenn man weiß, wie einfach dies umzusetzen ist. Denn schwer ist es nicht.

Kommentieren Teilen +1 Twittern
Dieser Artikel wurde von +Maximilian verfasst.
Kommentare
Einen eigenen Kommentar hinterlassen




Newsletter

Um unseren Newsletter zu abonnieren, tragen Sie bitte einfach Ihre Email-Adresse unten ein. Sie werden daraufhin eine Bestätigungsmail erhalten!

Jetzt den RSS-Feed abonnieren!

Klicke hier und abonniere den RSS-Feed, um immer auf dem neusten Stand zu bleiben.

Tipp senden

Du hast etwas entdeckt, über das wir noch nicht berichtet haben? Dann schicke uns doch einen Hinweis zu!

Klicke einfach auf den unteren Button, fülle das Formular aus und wenn das Thema passt, erscheint bei uns schon bald ein Artikel zu deiner Entdeckung.

Jetzt Tipp senden!