Lorenz Hohmann 25. Juni 2019

CSS3: So zentrierst du Elemente richtig

Was soll daran schwierig sein, Elemente in CSS zu zentrieren? So mögt ihr spontan denken. Wenn ihr euch mit dem Thema jedoch schon öfter befasst habt, wisst ihr auch, dass Zentrierung manchmal zu einer echten Herausforderung werden kann. Im folgenden Beitrag zeige ich euch fünf Methoden, eure Elemente und Schriftzüge in HTML mit Hilfe von CSS3 zu zentrieren.

Ihr werdet sehen, dass die zu wählende Methode von der konkreten Situation abhängt, so dass es pauschale Empfehlungen für oder gegen eine bestimmte Methode nicht geben kann. Die verschiedenen Möglichkeiten schauen wir uns basierend auf dem folgenden HTML-Code an.

Unsere Demo-Struktur beinhaltet einen vollständigen Head und einen Body-Bereich. In dem dort befindlichen .container möchten wir unser .centered-element zentrieren. Styles fügen wir der Einfachheit halber in den Style-Tag im Head-Bereich ein.

Im “echten” Betrieb solltet ihr euer CSS aber in eine separate Datei verlagern und über den Link-Tag einbinden:

<link rel="stylesheet" href="path/to/css/file/styles.css">

Das dient der Übersichtlichkeit, da je nach Projekt schnell einige tausend Zeilen CSS zusammenkommen können.

Nun aber zu unserem Dokument:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Zentrieren in CSS</title>
		<style>
			.container {
				background-color: #D3E8FA;
				height: 300px;
				width: 300px;
			}
			.centered-element {
				width: 30px;
				height: 30px;
				border-radius: 5px;
				background-color: #203695;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="centered-element">CENTER</div>
		</div>
	</body>
</html>

Die vorhandenen Styles für den .container und unser .centered-element dienen nur der Anschaulichkeit und müssen uns nicht weiter interessieren. So sieht unser reines Grundgerüst im Browser aus:

Methode #1: Flexbox

Mit Flexbox können wir Elemente sowohl horizontal als auch vertikal zentrieren. Die Eigenschaften werden von allen modernen Browsern unterstützt, sogar vom Internet Explorer ab Version 10.

Dem äußeren Container – oft auch Wrapper genannt – müssen wir nun die entsprechenden Eigenschaften geben. Dazu benutzen wir das Attribut display um zu definieren, dass es sich um eine Flexbox handelt.

Im nächsten Schritt können wir über justify-content die Items in diesem Container horizontal zentrieren. Um die Items auch noch vertikal zu zentrieren, können wir das Attribut align-items benutzen.

Insgesamt sieht unser CSS dann so aus:

.container {
display: flex;
justify-content: center;
align-items: center;
}

Damit erhalten wir dieses Ergebnis:

Methode #2: Grid-System

Die nächste Möglichkeit ist die Benutzung des CSS Grid-Systems. Ähnlich der Flexbox haben wir hier ebenso die Möglichkeit, unsere Items horizontal und/oder vertikal zu zentrieren.

Prinzipiell tauschen wir dabei nur den Wert unseres Attributs display durch grid aus.

So sieht der komplette Code dann aus:

.container {
display: grid;
justify-content: center;
align-items: center;
}

Wir erhalten damit wieder das gleiche Ergebnis wie unter der Nutzung der Flexbox-Option:

Wo ist jetzt der Unterschied und wann soll ich welche der beiden Möglichkeiten nutzen? Klar, dass ihr euch das jetzt fragt. Aber, es ist wie bei Radio Eriwan, es kommt darauf an. Pauschal kann ich euch da nichts empfehlen, denn wie ihr gesehen habt, können beide für dieses Beispiel das gleiche.

Allerdings bietet das CSS Grid-System noch viele weitere hilfreiche Funktionen, wie Spalten und Zeilen, Größe und Positionierung einzelner Elemente. Mehr dazu erfährst Du in diesem Artikel. Der Unterschied zwischen den beiden Methoden wird erst deutlich, wenn man verstanden hat, für was sie gemacht sind.

Fügen wir nun noch zwei weitere .centered-element hinzu, können wir einen deutlichen Unterschied in der Darstellung erkennen. So sieht das Ergebnis mit Flexbox aus:

Und so sieht das Ganze im Grid-System aus:

Das Grid-System ist also eher dafür ausgelegt, Spalten und Zeilen zu formatieren und Größen und Verhältnisse anzugeben. Für eine ganz einfache Zentrierung würde ich eher Flexbox empfehlen, da es leichter zu handhaben ist.

Methode #3: Textausrichtung

Die Ausrichtung des Textes ist auch eine Art der Zentrierung. Wir könnten unseren Text natürlich über die oben genannten Methoden zentrieren, da auch ein Text ein Element ist. Das müssen wir indes nicht tun, denn CSS bietet dafür das Attribut text-align.

.container p {
text-align: center;
}

Hier ist es egal, ob wir dem Paragraph (p-Tag) oder dem .container das Attribut mitgeben. Unser Ergebnis sieht bei beiden Varianten so aus:

Zu bedenken ist, dass wir bei dieser Methode nur die Möglichkeit haben, den Text horizontal zu zentrieren. Wenn wir unseren Text mittig in der Box anordnen wollen, könnten wir das über Flexbox, das Grid-System oder die absolute Positionierung erreichen.

Methode #4: Absolute Positionierung

Die absolute Positionierung ist zwar ebenfalls eine valide Methode, sollte allerdings nur im Notfall eingesetzt werden, da sie vor allem für responsives Webdesign eher ungeeignet ist. Problematisch ist dabei, dass Elemente verrutschen können und wir etliche Breakpoints benötigen, um vernünftig zu positionieren. Trotzdem möchte ich diese Methode hier einmal vorstellen.

Als erstes benötigt der äußere Container eine relative Positionierung. Das bedeutet, dass sich innerhalb des Containers befindliche Elemente absolut in diesem Container ausrichten und diesen nicht verlassen können. Das erreichen wir mit diesem Code:

.container {
position: relative;
}

Nun können wir das innere Element absolut positionieren. Mit left und top setzen wir das Element je 50% vom oberen und linken Rand entfernt. Da wir so die obere linke Ecke des Elementes in der Mitte haben, müssen wir noch zusätzlich über transform je -50%, also die Hälfte des zu positionierten Elements wieder abziehen.

.container .centered-element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Bitte beachtet, dass, wenn ihr mehrere Elemente über diese Möglichkeit zentrieren wollt, diese alle übereinander liegen würden, da sie ja absolut positioniert sind. Hier müsstet ihr für diese inneren Elemente nochmal einen Container erstellen, der diese Elemente einschließt. Ihr braucht also quasi mehrere Elemente in einem absoluten Element in einem relativen Container. Klar, soweit?!

Methode #5: Abstandspositionierung

Die letzte Methode, Elemente mit CSS3 zu positionieren, ist die Abstandspositionierung. Hierbei haben wir nur die Möglichkeit, Elemente horizontal zu zentrieren. Für eine vertikale Zentrierung müssen wir auf eine der anderen genannten Methoden zurückgreifen.

Bei der Abstandspositionierung geben wir dem zu zentrierenden Element einen Außenabstand zum linken und rechten Rand. Wenn dieser jeweils gleich groß ist, wird das Element zentriert. Nach oben und unten belassen wir den Abstand bei 0, wobei dieser optional angepasst werden kann. In der folgenden Schreibweise steht der erste Wert für die y-Achse (oben und unten) und der zweite Wert für die x-Achse (links und rechts). Für die x-Achse setzen wir den Wert auf auto, da dieser sich dann automatisch proportional anpasst.

.container .centered-element {
margin: 0 auto;
}

Wir erhalten dieses Ergebnis:

Zentrierung: Vermeidet diese häufigen Fehler

Trotz dieser vielen Möglichkeiten verzweifelt der ein oder andere doch, wenn es um das Zentrieren von Elementen geht. Solltet ihr euch bereits die Haare raufen, arbeitet mal die folgende Liste ab. Eventuell liegt hier der Fehler:

Euer äußerer Container (hier .container) benötigt position: relative; und display: block;
Eure Container (hier .container und .centered-element) benötigen eine feste Breite und ggf. Höhe.
Eure Elemente haben ein margin, padding oder border, von dem ihr nichts wisst.

Fazit: Viele Wege führen ins Zentrum von Rom

Zunächst sieht es so aus, als gäbe es einen Haufen an Möglichkeiten für die Zentrierung eurer Elemente. Dabei müsst ihr allerdings beachten, dass es auf die konkrete Situation ankommt. Nicht immer ist jede Methode gleich gut geeignet oder auch nur sinnvoll.

Hier sind nochmal alle fünf Möglichkeiten in der Live-Demo:


See the Pen Zentrieren mit CSS by WebDEasy (@WebDEasy) on CodePen.dark
%MINIFYHTML70510307921ee912708e376d989c421110%

(dpe)

(Beitragsbild: Clker-Free-Vector-Images / Pixabay, Screenshots: Lorenz Hohmann)

Mehr dazu:

Lorenz Hohmann

Ich bin Webentwickler & Server Administrator. Damit reicht mein Aufgabengebiet von der Gestaltung des Frontends bis hin zum Schreiben von Shell-Skripten.

Ein Kommentar

Stefan says:
26. Juni 2019 um 10:39 Uhr
Auf dem Smartphone sind die Elemente NICHT sauber zentriert.
Die zu zentrierenden Elemente liegen deutlich weiter rechts als die horizontale Mitte des Containers.
https://www.drweb.de/elemente-zentrieren-css/
Um das Problem zu lösen, welches nur auf Smartphones zur Ansicht kommt, muss in folgender Regel die WIDTH nicht über VW sondern in Prozent angegeben werden.
@media (max-width: 500px)
.image-container img {
height: 100%;
max-width: fit-content;
width: 100%; /* KORREKTUR = Angabe in Prozent statt in VW */
}
Ich erspare mir die Begründungen, denn diese Begründungen wären schnell bereits wieder ein Artikel für sich ;)
Antworten