D.r Web seit 1997 print.
  • Beste Agenturen
  • Agentur-Städte 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur eintragen ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Städte 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur eintragen ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Magazin
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
D.r Web seit 1997 print.
  • Agentur finden
  • Magazin
Agentur eintragen →
Dr. Web » CSS » CSS3: So zentrierst du Elemente richtig

CSS3: So zentrierst du Elemente richtig

Was soll daran schwierig sein, Elemente in CSS zu zentrieren? So magst du spontan denken. Wenn du dich mit dem Thema jedoch schon öfter befasst hast, weisst du auch, dass Zentrierung manchmal zu einer echten Herausforderung werden kann. Im folgenden Beitrag zeige ich dir fünf Methoden, Elemente und Schriftzüge in HTML mit Hilfe von CSS3 zu zentrieren.

Sozial sein
Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • 4 Kommentare
Lesedauer: 6 Minuten
  • von Lorenz Hohmann
  • 1. Mai 2022

Du wirst sehen, dass die zu wählende Methode für das Zentrieren von Elementen mit CSS 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. Um die Beispiele nachbauen zu können, wirst Du einen HTML-Editor brauchen.

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 solltest du dein 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="de">
	<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>

Mehr zum Thema Background-color und Farbverläufen findest du hier. 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. Solltest du dir bereits die Haare raufen, arbeite zunächst die folgende Liste ab. Eventuell liegt hier der Fehler:

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

Cheet Sheet zum Zentrieren mit CSS

5 Wege um Elemente im CSS zu zentrieren.
Bildquelle: Pradeep Pandey auf Github.com

Das Cheet Sheet fasst alle 5 Wege um Elemente in CSS zu zentrieren gut zusammen. Du kannst es hier herunterladen.

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 musst du allerdings beachten, dass es auf die konkrete Situation ankommt. Nicht immer ist jede Methode gleich gut geeignet oder sinnvoll.

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

5 Methoden um Elemente in CSS zu zentrieren.
Zentrieren mit CSS. Link zur Demo auf CodePen.io

Dieser Beitrag wurde zuerst am 24. Juli 2019 veröffentlicht und am 1. Mai 2022 überarbeitet und aktualisiert.

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

Lorenz Hohmann

Lorenz Hohmann

schreibt auf seinem Blog (webdeasy.de) über das Thema Webentwicklung und Webserver-Administration. Er hat einige Jahre Erfahrung im IT-Bereich und im Bereich Webentwicklung, seine große Leidenschaft.
Sponsor. Du bist auch interessiert? Kontaktiere uns →
Kostenloses SEO-Tool. Werbung für die OSG Performance Suite.

Jobs

Lead Entwickler Mobile mit Fokus iOS-Entwicklung

Karlsruhe

Grafik-Designerin

Freiburg im Breisgau

Sprachtalente

Volkach oder Würzburg

Zum richtigen Job

Agenturpartner

UnitedAds

Starnberg

Khoa Nguyen – Online Marketing Beratung & SEA / Social Ads / SEO Freelancer

München

YOYABA

Hamburg

Philipp Pistis – WordPress Agentur

Prittriching

PromoMasters Online Marketing

Wien

Alle Agenturpartner

Lust auf mehr? Wir empfehlen folgende Artikel:

Was du bei der Übersetzung deiner Website beachten musst

Du betreibst einen Onlineshop oder eine Hotelwebsite und möchtest nun auch in anderen Ländern bekannter werden oder eine andere Zielgruppe ansprechen?

 →   

CSS3: So zentrierst du Elemente richtig

Was soll daran schwierig sein, Elemente in CSS zu zentrieren? So magst du spontan denken. Wenn du dich mit dem Thema jedoch schon öfter befasst hast, weisst du auch, dass Zentrierung manchmal zu einer echten Herausforderung werden kann. Im folgenden Beitrag zeige ich dir fünf Methoden, Elemente und Schriftzüge in HTML mit Hilfe von CSS3 zu zentrieren.

 →   

Elementor für WordPress: Was sind die Vor- und Nachteile?

Elementor ist der führende Pagebuilder für WordPress und kann mehr als 7 Millionen (!) aktive Installationen für sich verbuchen. Ich habe mir den Senkrechtstarter für dich angesehen.

 →   

4 Antworten zu „CSS3: So zentrierst du Elemente richtig“
— was ist Deine Meinung?

  1. Leona sagt:
    23. Juli 2021 um 11:36 Uhr

    Vielen herzlichen Dank, sehr hilfreich!

    Antworten
  2. Fahrzeugvermarktung sagt:
    26. Februar 2020 um 11:29 Uhr

    Wie kann man absolut positionierte Elemente zentrieren?

    Antworten
  3. Claudia Wiebe sagt:
    14. August 2019 um 11:40 Uhr

    Vielen Dank für die ausführlichen Erklärungen, ich probiere das aus!
    Claudia

    Antworten
  4. Stefan sagt:
    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

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Bad Nauheim
  • Agenturen in Basel
  • Agenturen in Bayreuth
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Bad Nauheim
  • Agenturen in Basel
  • Agenturen in Bayreuth
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.