Mit CSS zentrieren: Text, Bild und Elemente

Text zentrierst du mit text-align: center. Ein Blockelement rückt margin-inline: auto zusammen mit einer Breitenangabe in die Mitte. Für beide Achsen gleichzeitig genügt display: grid mit place-items: center. Im Flex-Container erledigen das justify-content: center und align-items: center.

Zentrieren ist die Aufgabe, für die CSS die meisten Wege kennt. Welcher Weg passt, hängt an zwei Fragen. Geht es um den Inhalt innerhalb eines Elements oder um das Element selbst? Und geht es um eine Achse oder um beide? Aus diesen zwei Fragen ergeben sich die vier Bausteine text-align, margin-inline, Flexbox und Grid.

Diese Seite zeigt für jede Zentrier-Aufgabe die heute empfohlene Lösung und dazu die veraltete Variante, die in alten Vorlagen und Baukästen weiterlebt. Die Layout-Systeme selbst stehen ausführlich unter Flexbox und Grid. Stand September 2026 sind Flexbox, Grid und die logischen Abstands-Eigenschaften in allen aktuellen Browsern verfügbar. Wie die Regeln in das Dokument kommen, steht unter CSS einbinden.

Das Wichtigste in Kürze

• text-align: center zentriert den Inline-Inhalt eines Elements und vererbt sich an alle Kinder. Das Element selbst bleibt an seiner Stelle.
• margin-inline: auto zentriert ein Blockelement horizontal, sobald es eine Breite hat, die kleiner als sein Container ist.
• display: grid mit place-items: center zentriert ein Kind mit einer Zeile CSS auf beiden Achsen.
• In Flexbox hat justify-items keine Wirkung. place-items: center zentriert dort allein auf der Querachse. Für beide Achsen stehen justify-content: center und align-items: center.
• Das <center>-Element ist seit HTML5 aus dem Standard entfernt. Browser stellen es weiter dar. Der Validator meldet es als Fehler.
• Zentrierter Fließtext über mehrere Zeilen erschwert das Lesen, weil der Zeilenanfang von Zeile zu Zeile an eine andere Stelle springt. text-align: center bleibt kurzen Überschriften und einzelnen Zeilen vorbehalten.

CSS mittig zentrieren: die Lösungen im Überblick

Text mit CSS zentrieren: text-align: center

text-align: center stellt den Inline-Inhalt eines Blockelements mittig. Dazu gehören Text, Inline-Bilder und Inline-Block-Boxen. Ein zusätzliches Element brauchst du dafür an keiner Stelle.

<p class="hinweis">Diese Zeile steht mittig.</p>

.hinweis {
  text-align: center;
}

Die Eigenschaft vererbt sich. Setzt du sie auf einen Container, steht der Inhalt aller Kinder ebenfalls mittig. Einen Teilbereich stellst du mit text-align: start zurück. Der logische Wert start folgt dabei der Schreibrichtung. Welcher Selektor die Regel setzt, entscheidet über die Spezifität.

Eine Überschrift zentrieren

Eine Überschrift ist ein Blockelement und nimmt text-align: center direkt entgegen.

h2.sektion-titel {
  text-align: center;
  text-wrap: balance;
}

text-wrap: balance verteilt die Zeilen einer umbrechenden Überschrift gleichmäßig und verhindert einzelne Restwörter in der letzten Zeile. Die Ausrichtung ändert die Bedeutung der Überschrift an keiner Stelle. Welche Rangstufe richtig ist, ergibt sich allein aus der Überschriften-Hierarchie.

Ein div horizontal zentrieren: margin-inline: auto

Ein Blockelement nimmt ohne Angabe die volle Breite seines Containers ein. In diesem Zustand gibt es keinen Platz, der sich verteilen ließe. Erst eine Breitenangabe erzeugt freien Raum, und auto teilt diesen Raum gleichmäßig auf beide Seiten.

<div class="inhalt">
  <p>Ein Textbereich mit begrenzter Zeilenlänge.</p>
</div>

.inhalt {
  max-width: 40rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

margin-inline ist die logische Kurzform für margin-left und margin-right. Sie folgt der Schreibrichtung des Dokuments. Die ältere Schreibweise margin: 0 auto funktioniert weiter und setzt zusätzlich den Abstand nach oben und unten auf null. max-width in rem ist gegenüber einer festen Pixelbreite im Vorteil, weil die Box bei vergrößerter Schrift mitwächst. Ob ein <div> an dieser Stelle das richtige Element ist, klärt der Vergleich div gegen span.

Ein Bild mit CSS zentrieren

Ein <img> ist ein Inline-Element. Deshalb gibt es zwei Wege. Über das Elternelement wirkt text-align: center. Am Bild selbst wirkt display: block zusammen mit margin-inline: auto. Der zweite Weg ist robuster, weil er ohne Vererbung auskommt.

<figure class="bildblock">
  <img src="/img/aufbau.webp" width="800" height="450" alt="Aufbau des Rasters in drei Spalten">
  <figcaption>Das Raster in der Übersicht.</figcaption>
</figure>

.bildblock img {
  display: block;
  margin-inline: auto;
  max-width: 100%;
  height: auto;
}

.bildblock figcaption {
  text-align: center;
}

max-width: 100% zusammen mit height: auto hält das Bild bei schmalen Fenstern im Rahmen. Die Kombination aus <figure> und <figcaption> ist die semantisch richtige Klammer für Bild und Beschriftung, beschrieben unter figure und figcaption. Der Alternativtext gehört unabhängig von der Ausrichtung ins alt-Attribut, wie unter Alt-Texte schreiben beschrieben.

Ein div horizontal und vertikal zentrieren

Für beide Achsen gleichzeitig gibt es drei Muster. Zwei davon sind der Normalfall, das dritte ist für Elemente außerhalb des Textflusses gedacht.

Flexbox

<div class="buehne">
  <div class="karte">Inhalt in der Mitte</div>
</div>

.buehne {
  display: flex;
  justify-content: center;  /* Hauptachse, hier waagerecht */
  align-items: center;      /* Querachse, hier senkrecht */
  min-height: 60vh;
}

Ein verbreiteter Irrtum betrifft place-items im Flex-Container. Die Kurzform setzt align-items und justify-items, und justify-items hat in Flexbox keine Wirkung. place-items: center zentriert dort deshalb allein senkrecht. Die waagerechte Verteilung übernimmt in Flexbox immer justify-content. min-height statt height lässt die Box bei mehr Inhalt wachsen.

Grid

.buehne {
  display: grid;
  place-items: center;
  min-height: 60vh;
}

In Grid wirken beide Teile der Kurzform. place-items richtet jedes Element in seiner Zelle aus. place-content: center verschiebt dagegen den gesamten Rasterblock in die Mitte des Containers. Bei einem einzigen Kind sieht das Ergebnis gleich aus. Bei mehreren Kindern unterscheiden sich die beiden Eigenschaften deutlich, wie die Seite zu Grid im Detail zeigt.

Absolute Positionierung mit transform

Dieses Muster ist für Elemente gedacht, die aus dem Textfluss genommen sind, etwa für einen Dialog oder für eine Markierung auf einem Bild.

.buehne {
  position: relative;
}

.karte {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}

Die Prozentwerte von inset beziehen sich auf den Container. Die Prozentwerte von translate beziehen sich auf das Element selbst. Diese Kombination arbeitet ohne bekannte Maße. Für Überlagerungen über dem ganzen Ansichtsfenster ist der Grid-Weg ruhiger: position: fixed; inset: 0; display: grid; place-items: center.

Vertikal zentrieren in einer Zeile

Symbol und Beschriftung auf gleicher Höhe sind ein Fall für align-items: center in einem Inline-Flex-Container.

<a class="aktion" href="/ressourcen.html">
  <svg width="20" height="20" aria-hidden="true" focusable="false"><use href="#pfeil"></use></svg>
  <span>Datei laden</span>
</a>

.aktion {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

Der ältere Weg für reine Inline-Inhalte heißt vertical-align: middle. Er stellt die Mitte der Box auf die Grundlinie plus die halbe x-Höhe des Elternelements und erzeugt je nach Schriftart kleine Versätze. Für Symbole neben Text liefert Flexbox das vorhersagbarere Ergebnis. In Blockcontainern zentriert align-content: center die Kinder senkrecht, ohne dass ein Flex- oder Grid-Container nötig ist. Ältere Browserversionen ignorieren die Eigenschaft und stellen den Inhalt oben dar.

Mehrere Elemente nebeneinander mittig

Eine Gruppe aus mehreren Elementen zentriert der Flex-Container über die Hauptachse.

<div class="aktionen">
  <button type="button">Speichern</button>
  <button type="button">Verwerfen</button>
</div>

.aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

gap ersetzt die früher üblichen Außenabstände am letzten Element. flex-wrap: wrap ist die wichtigste Zeile in diesem Block, weil die Reihe auf schmalen Bildschirmen sonst über den Rand läuft. Was dann passiert und wie du es prüfst, steht unter overflow.

Eine Tabelle zentrieren

Eine Tabelle ist ein Blockelement mit Inhaltsbreite. Sie nimmt margin-inline: auto direkt an, solange keine Breite von 100 Prozent gesetzt ist.

table {
  margin-inline: auto;
  border-collapse: collapse;
}

caption {
  text-align: center;
  padding-block-end: 0.5rem;
}

td.zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

Zahlenspalten bleiben rechtsbündig, weil sich Beträge so nach Stellenwert vergleichen lassen. Die Kopfzellen und die Zuordnung über scope gehören ins Markup und stehen unter Tabellen semantisch aufbauen.

Beschriftung im Button und Zeichen im Kreis

Ein <button> zentriert seine Beschriftung von sich aus, weil das Browser-Stylesheet text-align: center mitbringt. Sobald ein Symbol dazukommt, übernimmt Flexbox die Ausrichtung.

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding-inline: 1rem;
}

.zeichen-kreis {
  inline-size: 3rem;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

aspect-ratio: 1 hält den Kreis rund, ohne dass du Höhe und Breite doppelt pflegst. Die min-height am Button sichert die Zielgröße für Finger und Zeigegeräte. Ob an dieser Stelle ein Button oder ein Link gehört, klärt der Vergleich Buttons und Links.

Veraltete Verfahren und ihr Ersatz

Drei Muster begegnen dir in altem Code. Alle drei haben heute eine kürzere Entsprechung.

<!-- Don't: seit HTML5 aus dem Standard entfernt -->
<center>
  <table align="center" width="600">…</table>
</center>
<p align="center">Text über das align-Attribut zentriert</p>

/* Don't: Zentrierung über negative Außenabstände */
.karte {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 200px;
  margin-left: -150px;
  margin-top: -100px;
}

/* Don't: Float-Trick für unbekannte Breiten */
.aussen { float: left; position: relative; left: 50%; }
.innen  { position: relative; left: -50%; }

Das <center>-Element und das align-Attribut stehen im HTML-Standard unter den nicht konformen Merkmalen. Browser stellen beide weiter dar, weil der Rendering-Abschnitt der Spezifikation eine Darstellungsregel dafür festlegt. Der Validator meldet sie als Fehler. Ersatz ist text-align: center für Inhalt und margin-inline: auto für die Box.

Die Variante mit negativen Außenabständen setzt feste Maße voraus. Sobald der Text wächst oder die Schrift größer eingestellt ist, passt die Verschiebung um die halbe Höhe nicht mehr. Ersatz ist transform: translate(-50%, -50%) oder ein Grid-Container. Der Float-Trick mit den beiden Prozentwerten stammt aus der Zeit vor Flexbox und wird durch eine Zeile justify-content: center ersetzt.

Barrierefreiheit: worauf es ankommt

Zentrierter Fließtext erschwert das Lesen. Bei linksbündigem Satz findet das Auge den nächsten Zeilenanfang immer an derselben Stelle. Bei zentriertem Satz beginnt jede Zeile an einer anderen Position, und der Blick muss sie neu suchen. Das kostet Menschen mit Legasthenie und Menschen mit eingeschränktem Sichtfeld spürbar Zeit. Bei Bildschirmvergrößerung zeigt der Ausschnitt zusätzlich nur einen Teil der Zeile, und der springende Anfang landet außerhalb des sichtbaren Bereichs. Die W3C-Empfehlungen zur kognitiven Barrierefreiheit raten deshalb zu linksbündigem Fließtext. Zentriert bleiben kurze Überschriften und einzelne Zeilen.

Feste Höhen an zentrierten Boxen schneiden Text ab. Eine Box mit height: 200px und zentriertem Inhalt sieht bei Standardschrift ordentlich aus. Bei 200 Prozent Textvergrößerung läuft der Inhalt darüber hinaus und verschwindet, sobald overflow: hidden dazukommt. Das verstößt gegen 1.4.4 Textgröße ändern und gegen 1.4.10 Reflow. Auch die vergrößerten Zeilenabstände aus 1.4.12 Textabstände brauchen Platz. Mit min-height statt height wächst die Box mit ihrem Inhalt mit.

Zentrierung per transform kann Text unscharf darstellen. Bei ungerader Breite oder Höhe landet die Box auf einem halben Pixel, und der Browser rechnet die Schrift auf Zwischenwerte um. Auf Bildschirmen mit einfacher Pixeldichte sieht die Schrift dann matt aus. Flexbox und Grid vermeiden das, weil sie die Box am Raster ausrichten.

Senkrecht zentrierte Bedienelemente brauchen genug Fläche. Ein Symbol, das mittig in einer schmalen Leiste sitzt, unterschreitet leicht die Mindestzielgröße von 24 mal 24 CSS-Pixeln aus 2.5.8 Zielgröße Minimum. Die Ausrichtung selbst vergrößert die Klickfläche an keiner Stelle. Dafür sorgen min-height und padding am Element.

Zentrierte Meldungen brauchen eine programmatische Verknüpfung. Eine Fehlermeldung, die optisch mittig unter einem Feld steht, ist für einen Screenreader ohne Verbindung zum Feld unsichtbar. Die Zuordnung entsteht über aria-describedby am Eingabefeld und einen Live-Bereich für neu erscheinende Meldungen. Das verlangt 1.3.1 Info und Beziehungen, weil visuell vermittelte Beziehungen programmatisch bestimmbar sein müssen.

Häufige Fragen

Wie zentriere ich ein Bild mit CSS?

Setze am Bild display: block und margin-inline: auto. Ein <img> ist von Haus aus ein Inline-Element, und Inline-Elemente reagieren auf automatische Außenabstände nicht. Der zweite Weg führt über das Elternelement mit text-align: center, weil sich diese Eigenschaft auf Inline-Inhalt auswirkt. In einem Flex-Container übernimmt justify-content: center die gleiche Aufgabe.

Wie zentriere ich einen div horizontal und vertikal?

Mit zwei Zeilen im Elternelement: display: grid und place-items: center. Der Container braucht dabei eine Höhe, etwa min-height: 60vh, weil sonst kein Raum zum Verteilen entsteht. Mit Flexbox lautet die Lösung display: flex plus justify-content: center plus align-items: center. Beide Wege funktionieren ohne bekannte Maße des Kindes.

Warum funktioniert margin auto nicht?

Der häufigste Grund ist eine fehlende Breitenangabe. Ein Blockelement füllt seinen Container vollständig aus, und ohne freien Raum verteilt auto nichts. Setze max-width oder width. Weitere Ursachen sind ein Element mit display: inline, ein aktives float und der Versuch, senkrecht zu zentrieren. margin-block: auto wirkt im normalen Blockfluss nicht. In Flex- und Grid-Containern wirkt es dagegen auf beiden Achsen.

Wie zentriere ich Text vertikal in einem div?

Gib dem <div> display: flex und align-items: center, dazu eine Mindesthöhe. Bei einer einzelnen Zeile führt auch line-height in Höhe des Elements zum Ziel. Dieser alte Weg versagt allerdings, sobald der Text umbricht. Für mehrzeiligen Inhalt bleibt Flexbox oder Grid die verlässliche Lösung, weil die Box mit dem Inhalt mitwächst.

Ist das center-Tag noch erlaubt?

Das <center>-Element ist seit HTML5 aus dem Standard entfernt und steht dort unter den nicht konformen Merkmalen. Browser stellen es aus Kompatibilitätsgründen weiter dar. Der HTML-Validator gibt einen Fehler aus. Dasselbe gilt für align="center" an <table>, <img> und <p>. Ersatz ist text-align: center für Inhalt und margin-inline: auto für Blockelemente.

Verwandte Themen

• Flexbox: die Anordnung entlang einer Achse mit justify-content und align-items im Detail
• Grid: Zeilen und Spalten zugleich, dazu der Unterschied zwischen place-items und place-content
• overflow und Scrollen: was passiert, wenn zentrierter Inhalt größer wird als seine Box
• Reflow, Zoom und Textabstände: die Prüfsicht auf feste Höhen und Breiten
• Barrierefreiheit selbst testen: der Zoom-Test bei 400 Prozent in fünf Minuten

Quellen

• Center an element: die Muster für eine und für beide Achsen (MDN Web Docs)
• CSS Box Alignment Module Level 3: Definition von align-items, justify-content und place-items samt der Einschränkung für Flex-Container (W3C)
• Non-conforming features: center und das align-Attribut im HTML Standard (WHATWG)
• Understanding SC 1.4.10 Reflow: warum feste Maße bei 320 Pixeln Breite versagen (W3C Web Accessibility Initiative)