Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt

< dr. web > » Webdesign » CSS3: So zentrierst du Elemente richtig

CSS3: So zentrierst du Elemente richtig

  • Aktualisiert am 3. August 2023
  • von Lorenz Hohmann
  • Webdesign
  • 4 Kommentare

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:

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.
<!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:

01 csszentrieren CSS3: So zentrierst du Elemente richtig

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:

02 csszentrieren CSS3: So zentrierst du Elemente richtig

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:

03 csszentrieren CSS3: So zentrierst du Elemente richtig

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:

04 csszentrieren CSS3: So zentrierst du Elemente richtig

Und so sieht das Ganze im Grid-System aus:

05 csszentrieren CSS3: So zentrierst du Elemente richtig

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:

06 csszentrieren CSS3: So zentrierst du Elemente richtig

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:

07 csszentrieren CSS3: So zentrierst du Elemente richtig

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:

Zentrieren mit CSS. Link zur Demo auf CodePen.io
CSS3: So zentrierst du Elemente richtig 1

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.

Inhaltsverzeichnis

Agenturpartner in Stuttgart

Edit Content

Trendmarke

Unser Unternehmen bietet eine ehrliche und transparente Angebotserstellung, um sicherzustellen, dass Sie genau das erhalten, was Sie brauchen. Jedes Projekt wird nutzer- und zielgruppenorientiert realisiert, um maximale Effektivität zu gewährleisten.

Mit umfangreichen Erfahrungen in über 60 Branchen sind wir in der Lage, Ihre spezifischen Anforderungen zu erfüllen.

Unser bewährter Workflow ermöglicht eine agile Projektabwicklung, während unsere technische Expertise auf höchstem Niveau sicherstellt, dass Ihr Produkt technisch einwandfrei ist.

Sie profitieren von festen Ansprechpartnern und einem eingespielten Team, das für eine reibungslose Zusammenarbeit sorgt. Von der Idee bis zum fertigen Produkt begleiten wir Sie in jeder Phase. Darüber hinaus bieten wir Ihnen unbegrenzte Weiterentwicklungsmöglichkeiten und zuverlässigen Support, um sicherzustellen, dass Ihr Produkt auch in Zukunft erfolgreich bleibt.

— Max Heim,
Projectmanager
Alle Webdesign-Agenturen →

Lust auf mehr?

14 Best Practices, die Sie für einen erfolgreichen Internetseite Relaunch beachten sollten

Was bewegt einen Unternehmer dazu, seine Internetseite von Grund auf neu auszurichten? Nun, die Gründe für einen Internetseite Relaunch einer können sehr vielfältig sein. Oft spielt ein veraltetes Design eine Rolle. Dieser Grund ist nicht so trivial, wie er vielleicht erscheint. Denn ein unmodernes Aussehen der Webseite kann Besucher und damit potenzielle neue Kunden abstoßen.

KI GPT-4: werden Webdesigner und sonstige Erdlinge ihren HAL-Moment erleben?

Wo ist dieser verdammte Aus-Schalter?” Dies waren die letzten Worte von David Bowman, dem Anführer einer Widerstandsgruppe Webdesigner, denen es gelang zum vermeintlichen WDN-Zentralcomputer vorzudringen, bevor sie von Wächterdroiden eliminiert wurden.

Microsoft Designer to the people: KI Power Webdesign und Grafikdesign?

Ein Webdesign selbst erstellen? Ist bei mir schon ewig her. 2006 muss das gewesen sein. Ich durfte für eine Rechtsanwaltskanzlei ran. Typische Erstaufträge. Freundes- und Bekanntenkreis abgrasen eben. Der damalige Freund einer Freundin arbeitete dort und brachte mich ins Spiel.

4 Antworten

  1. 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
  2. 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
  3. Fahrzeugvermarktung sagt:
    26. Februar 2020 um 11:29 Uhr

    Wie kann man absolut positionierte Elemente zentrieren?

    Antworten
  4. Leona sagt:
    23. Juli 2021 um 11:36 Uhr

    Vielen herzlichen Dank, sehr hilfreich!

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau