CSS zentrieren: so geht das!

CSS zentrieren meistern: Ultimative Tipps und Tricks

CSS zentrieren! 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.

FAQ

Wie kann ich in CSS Inhalte zentrieren?

Was muss ich tun, um einen div Container in CSS zu zentrieren?

Das Zentrieren eines div-Containers in CSS ist eine häufig gestellte Frage. Hierfür gibt es zwei gängige Methoden:

  1. Horizontales Zentrieren: Um einen div horizontal zu zentrieren, kannst Du die Eigenschaft margin nutzen. Setze margin: 0 auto;, um den div in der Mitte des übergeordneten Elements zu platzieren. Diese Methode funktioniert, wenn der div eine feste Breite (width) hat.
  2. Vertikales Zentrieren: Für das vertikale Zentrieren gibt es mehrere Ansätze, abhängig von der Struktur und den Anforderungen Deines Projekts. Eine effektive Methode ist die Verwendung von Flexbox. Setze auf das übergeordnete Element die Eigenschaften display: flex; und align-items: center;. Diese Technik zentriert den div vertikal innerhalb seines Containers.

Wie kann ich spezifische Elemente innerhalb eines div zentrieren?

Manchmal möchtest Du nicht den gesamten div, sondern spezifische Elemente innerhalb des div zentrieren. Hier sind zwei Techniken:

  1. CSS Flexbox: Für eine präzise Ausrichtung kannst Du auch hier Flexbox verwenden. Wende auf den Container display: flex; justify-content: center; align-items: center; an. Diese Einstellung zentriert die Elemente sowohl horizontal als auch vertikal.
  2. CSS Grid: Eine weitere elegante Lösung bietet CSS Grid. Definiere für den Container display: grid; place-items: center;. Diese Methode zentriert die Inhalte in beide Richtungen und ist besonders nützlich, wenn Du mit komplexeren Layouts arbeitest.

Das Zentrieren von Inhalten in CSS kann anfangs herausfordernd sein, aber mit diesen Techniken hast Du einen guten Startpunkt, um Deine Webseiten optisch ansprechend zu gestalten.

Wie kann ich in CSS div und andere Elemente mittig ausrichten?

Wie zentriere ich einen div in CSS vollständig?

Das vollständige Zentrieren eines div in CSS kann auf mehrere Arten erfolgen, je nachdem, ob Du horizontale oder vertikale Ausrichtung oder beides benötigst:

  1. Horizontal und Vertikal mit Flexbox: Eine der einfachsten Methoden ist die Verwendung von Flexbox. Setze auf den Container display: flex; justify-content: center; align-items: center;. Diese Einstellungen zentrieren den div sowohl horizontal als auch vertikal in seinem Elternelement.
  2. Verwenden von CSS Grid: CSS Grid bietet ebenfalls eine schnelle Lösung. Mit display: grid; place-items: center; auf dem Container werden alle Kinder-Elemente zentral im Grid positioniert, sowohl horizontal als auch vertikal.

Wie erreiche ich das Zentrieren eines CSS Containers?

Das Zentrieren eines Containers ist besonders nützlich, um das Layout deiner Webseite auszugleichen. Hier sind Methoden, die sowohl für Block-Elemente als auch für responsive Designs funktionieren:

  1. Flexbox zur Zentrierung verwenden: Wenn der zu zentrierende Container flexiblere Kinder hat, nutze display: flex; justify-content: center;. Für vertikale Zentrierung füge hinzu: align-items: center;.
  2. Margin-Auto-Trick für horizontale Zentrierung: Bei einem Block-Element (wie einem div), das eine spezifische Breite hat, kannst Du margin-left: auto; margin-right: auto; anwenden, um es horizontal zu zentrieren.

Was ist der beste Weg, um ein einzelnes Element in einem div zu zentrieren?

Manchmal musst Du nur ein Element innerhalb eines größeren div zentrieren. Hierfür kannst Du folgende Ansätze verwenden:

  1. Text-zentrierung mit CSS: Für Text oder inline Elemente innerhalb eines div, nutze text-align: center;. Dies zentriert den Inhalt innerhalb des div horizontal.
  2. Absolute Positionierung und Transform: Eine weitere Methode ist, das Element absolut innerhalb seines Containers zu positionieren und es dann zu transformieren: position: absolute; left: 50%; transform: translateX(-50%);. Dies zentriert das Element perfekt horizontal, basierend auf seiner eigenen Breite.

Mit diesen Techniken kannst Du sicherstellen, dass Deine Webseiteninhalte sowohl ästhetisch ansprechend als auch funktional sind, indem sie genau dort platziert werden, wo sie visuell am meisten Wirkung zeigen.

Weitere Methoden zum Zentrieren mit CSS

Wie kann ich ein Objekt in CSS zentrieren?

Um ein Objekt wie ein Bild oder ein Video in CSS zu zentrieren, kannst Du folgende Techniken verwenden:

  1. Flexbox: Ideal für responsive Designs. Setze auf den Container display: flex; justify-content: center; align-items: center;, um das Objekt sowohl horizontal als auch vertikal zu zentrieren.
  2. Grid-System: Ähnlich wie Flexbox, aber für komplexe Layouts besser geeignet. Verwende display: grid; place-items: center; auf dem Elternelement, um das Objekt zentral zu positionieren.

Wie zentriere ich einen div innerhalb eines anderen div?

Diese Anforderung kommt oft vor, besonders bei geschachtelten Layouts:

  • Absolute Positionierung: Setze auf den inneren div position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);. Dies zentriert den inneren div genau in der Mitte des äußeren div.

Wie erreiche ich die horizontale und vertikale Zentrierung eines div?

Für eine exakte Zentrierung in beide Richtungen:

  • Flexbox: Nutze display: flex; justify-content: center; align-items: center; auf dem Elternelement. Dies ist eine der effektivsten Methoden, um Inhalte flexibel zu zentrieren.

Methoden zum Zentrieren des Inhalts eines div

  • Text-zentrierung: Für Textelemente innerhalb eines div kannst Du einfach text-align: center; verwenden, um den Text horizontal zu zentrieren.

Besondere Fälle: Zentrieren in HTML und spezifische Elemente

  • HTML-Container zentrieren: Verwende Flexbox oder Grid, je nach Bedarf des Layouts, um Container wie section oder article zu zentrieren.
  • Zentrierung des body-Elements: Manchmal willst Du alles innerhalb des body zentrieren. Hierfür kannst Du ebenfalls Flexbox verwenden: Setze auf body die Eigenschaften display: flex; flex-direction: column; align-items: center; justify-content: center;.

Diese Methoden bieten dir eine breite Palette von Optionen, um verschiedenste Elemente auf deiner Webseite effektiv zu zentrieren. Egal ob du Text, Bilder, Videos oder ganze Layouts zentrieren möchtest, CSS bietet dir die Werkzeuge, um deine Ziele zu erreichen.

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:

Link zur Demo auf CodePen.io

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

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

Wie hilfreich fanden Sie diese Seite?

Durchschnittliche Bewertung 4.3 / 5. Anzahl Bewertungen: 9

Ähnliche BeitrĂ€ge

4 Kommentare

  1. 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 😉

Schreibe einen Kommentar

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