SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.
CSS/Tutorials/Ausrichtung/Inhalte zentrieren
In diesem Artikel werden mehrere Methoden vorgestellt, wie man Inhalte horizontal und vertikal zentriert. Dies soll nur mittels CSS ohne zusätzliches oder verwirrendes Markup in gängige Layouts übernommen werden können. Der zu zentrierende Bereich soll sich bei einer Anzeigebereichsänderung automatisch an den verfügbaren Viewport anpassen.
Zur Vereinfachung werden hier trotzdem die Klassen
zentriert
und inhalte-werden-vertikal-zentriert
verwendet.Inhaltsverzeichnis
Flexbox oder Grid-Layout
Die einfachste Umsetzung gelingt durch Anwenden des Flexbox- oder Grid-Layouts. Mit den Eigenschaften justify-content und align-items können die Inhalte nach Wunsch vertikal und horizontal zentriert werden.
#inhalte-werden-zentriert {
display: flex;
align-items: center;
justify-content: center;
}
In diesem Beispiel erhält das Elternelement des zu zentrierenden Inhalts mit display:flex flexible Layouts ohne feste Größenangaben.
Mit align-items werden Kindelemente zentriert. Wie du im unteren main-Element siehst, funktioniert dies auch mit mehreren Kindelementen. Bei kleineren Viewports passt sich der Inhalt an die verfügbare Breite an.
align-content
Seit April 2024 ist in allen großen Browsern eine Erweiterung des CSS Alignment Level 3 Moduls umgesetzt: align-content für Blockelemente und mehrspaltige Elemente. Damit kann man den Textinhalt eines Blockelements nun ganz einfach vertikal zentrieren oder auch unten ausrichten, ohne dafür extra ein anderes Layoutmodell einrichten zu müssen.
nav ul {
display: flex;
}
nav a {
display: block;
height: 100%;
text-align: center;
align-content: center;
}
<nav>
<ul>
<li><a href="#">selfhtml<br>Die Energie des Verstehens</a></li>
<li><a href="#">Forum</a></li>
</ul>
</nav>
Die Navigationsleiste im Beispiel verwendet Links, die mit display:block
und height:100%
auf volle Höhe der <li>
-Elemente gebracht werden. Ihr Inhalt wird traditionell mit text-align
horizontal und neu mit align-content
vertikal ausgerichtet.
ältere Varianten
horizontale Zentrierung
margin: auto
Ein gängige Variante Blockelemente zu zentrieren, ist das Setzen des linken und rechten Außenabstands auf den Wert auto
:
#zentriert {
margin-left: auto;
margin-right: auto;
}
Dies funktioniert aber nur, wenn die Breite (width
) des betreffenden Elements bekannt und entsprechend festgelegt ist. Ansonsten nimmt ein Block-Element definitionsgemäß immer die volle zur Verfügung stehende Breite ein, ist also schon so „zentriert“ wie überhaupt möglich.
Allgemein sieht das zu zentrierende Element nur dann auch optisch zentriert aus, wenn der Inhalt gut in die vorgegebene Breite hineinpasst. Ist das Element größer als die vorgegebene Breite, dann ragt es rechts hinaus; ist es jedoch kleiner, wird es an den linken Rand der vorgegebenen Breite gerückt:
.zentriert {
margin-left: auto;
margin-right: auto;
border: thin solid;
}
div {
max-width: 30em;
height: 5em;
background-color: #dfac20;
}
#p1 {
width: 2em;
}
#p2 {
width: 70em;
}
Die Rahmen um die beiden p
-Elemente verdeutlichen das Problem: Die beiden Elemente sind durchaus zentriert, der Inhalt aber leider nicht. Daher ist diese Lösung nur dann praktikabel, wenn die Größe des Inhalts bereits bekannt ist, so wie beim ersten div
.
- die Breite des Inhalts vorher bekannt ist
text-align: center
In einem Fall wie oben mit den beiden p
-Elementen könnte man sich gut mit der Eigenschaft text-align statt margin
behelfen. Das bedeutet aber auch, dass jede einzelne Textzeile zentriert wird, was nicht immer erwünscht ist, z.B. bei Listen. Ein extremes Beispiel:
.zentriert {
text-align: center
}
<h2 class="zentriert">Meine Vorsätze für's neue Jahr:</h2>
<ul class="zentriert">
<li>mehr rauchen</li>
<li>mehr trinken</li>
<li>auch mal nix tun</li>
<li>und einfach das Leben genießen!</li>
</ul>
<h2 class="zentriert">Meine Vorsätze für's neue Jahr: (extended edition)</h2>
<ul class="zentriert">
<li>mehr rauchen</li>
<li>mehr trinken</li>
<li>auch mal nix tun, d. h.
<ul>
<li>keinen Sport treiben</li>
<li>nicht abnehmen</li>
<li>und keine guten Vorsätze mehr fassen</li>
</ul>
</li>
<li>und einfach das Leben genießen!</li>
</ul>
Spätestens die verschachtelte Liste am Schluss ist zentriert gänzlich inakzeptabel, da die vormals logischen Einrückungen verschwinden.
Um so etwas mit CSS horizontal zu zentrieren, ohne bereits vorher die Breite der Liste zu kennen, muss man leider die HTML-Datei etwas verändern:
Zentrieren mit display: table
.inhalte-werden-zentriert {
display: table;
margin-left: auto;
margin-right: auto;
}
.zentriert {
display: table-cell;
}
Das div1
bildet sozusagen eine Layout-Tabelle mit einem Kindelement (div2
), das durch display: table-cell zu einer Zelle wird, welche genau die nötige Breite hat, um den Inhalt (die Liste ul
) aufzunehmen. Indem die Außenabstände der Tabelle auf auto
gesetzt werden, wird die Tabelle horizontal zentriert. Der Vorteil gegenüber den Layout-Tabellen früherer Jahre? Nun ja, man hat zumindest keine semantisch eigentlich falschen Elemente in seinem HTML, sondern „nur“ zwei semantisch bedeutungslose, neutrale div
s. Entscheide selbst!
vertikale Zentrierung
Zentrieren mit line-height
Man kann Text in einem Container vertikal zentrieren, wenn man die Zeilenhöhe entsprechend einstellen.
.inhalte-werden-vertikal-zentriert {
height: 200px;
line-height: 200px;
}
div img {
float:left;
}
Elemente mit der Klasse inhalte-werden-vertikal-zentriert
erhalten eine feste Höhe und eine gleich große Linienhöhe mit der CSS-Eigenschaft line-height.}}
<div class="inhalte-werden-vertikal-zentriert>
<img src.beispiel.jpg alt="">
Erklärungstext
</div>
Das Bild wird links neben dem Erklärungstext dargestellt. Dieser wird vertikal zentriert.
- Der Text ist evtl. länger als eine Zeile und wird dann durch die große Zeilenhöhe nicht mehr dargestellt.
- Du kannst niemals sicherstellen, dass dein Text in einer Zeile bleibt, wenn er länger wird oder sich der Viewport verkleinert (außer bei einsilbigen Buttonbeschriftungen wie „Los!“).
- Auch die Höhe des Bildes muss vorher bekannt sein. Bei einer Änderung der Bildabmessung müssen auch die Werte im CSS geändert werden.
Alternative mit display:table-cell
.inhalte-werden-vertikal-zentriert {
height: 200px;
display: table-cell;
vertical-align: middle
}
div img,
div p {
display: inline-block;
}
Mittels display:table-cell
verhalten sich die Kindelemente wie Tabellenzellen.
Um sie nebeneinander darzustellen, erhalten sie display: inline-block
.
<div class="inhalte-werden-vertikal-zentriert">
<img src.beispiel.jpg alt="">
<p>Erklärungstext</p>
</div>
display:table-cell
verwenden willst, darf man das Element nicht mit float positionieren!Vertikal zentrieren mit margin: auto
Wenn du dem Element eine feste Höhe gibst und es absolut positionierst, kann man es auch mit margin: auto;
zentrieren.[1]
.absolut-zentriert {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Das gelbe Rechteck wird im Viewport absolut positioniert und dann zentriert.
- Wenn du die Größe des Browserfensters veränderst, sieht amn, dass sich das gelbe Rechteck zwar immer mittig positioniert, bei kleineren Viewports aber den header überdeckt.
Vertikal und horizontal zentrierte Inhalte
html, body {
height: 100%;
margin: 0;
}
#top {
float: left;
width: 1px; height: 50%;
margin-bottom: -12em;
}
#container {
clear: left;
margin: 0 auto;
width: 32em; height: 24em;
background-color: #E0FFE0;
}
Zunächst werden die beiden Elemente html
und body
auf eine Höhe von 100% gebracht. Um den daraus resultierenden vertikalen Scrollbalken zu eliminieren, werden die Elemente noch von Außenabständen befreit.
Das zuvor angesprochene Element mit der ID top
bekommt nun 50% Höhe und 1 Pixel Breite zugewiesen, das untere Ende des Elements befindet sich somit immer exakt in der vertikalen Mitte des Anzeigebereichs. Damit das nachfolgende Element mit der ID container
visuell nicht erst ab hier beginnt, wird ein negativer unterer Außenabstand entsprechend der halben Höhe des zu zentrierenden Containers gesetzt. float: left;
sorgt schließlich dafür, dass der Container um das top
-Element herumfließen kann - aus dem Textfluss genommen wirkt die margin-bottom
-Eigenschaft nicht mehr - sobald der Container an der oberen Seite des Anzeigebereichs anstößt. Somit kann das Element nicht mehr unscrollbar aus dem Anzeigebereich verschwinden.
Das Container-Element stellt mittels clear: left;
den Textfluss wieder her - ansonsten würde das Element an seinem vorhergehenden Element vorbeifließen und einfach daneben an der oberen Kante des Anzeigebereichs kleben. Über die gewohnte Methode mit margin: 0 auto;
wird das Block-Element schließlich horizontal zentriert. Die Breite kann beliebig gewählt werden, die Höhe ebenfalls - allerdings muss der negative Außenabstand des vorhergehenden Elements auf die Hälfte dieses Wertes korrigiert werden.
- Dieses Verfahren funktioniert für Elemente mit nicht konstanter Höhe nicht.
- Auf kleineren Viewports werden Teile des Inhaltsbereichs nicht angezeigt.
Relative oder absolute Größenangaben
Die im Beispiel gewählten em
-Werte lassen sich problemlos durch andere Einheiten, etwa ex
oder px
ersetzen. Eine Angabe in %
ist rechnerisch allerdings nicht möglich. Um Prozent-Werte zu verwenden, muss die Höhe des Elements mit der ID top
auf die die Hälfte der Resthöhe des body
-Elements angepasst und der negative margin-Wert entfernt werden (bei 75% Höhe des Containers muss die Höhe von top
12.5% betragen).
absolute Positionierung
Soll ein Element sowohl horizontal als auch vertikal zentriert werden, bietet sich eine Lösung mit absoluter Positionierung an:
#zentriert {
position: absolute;
top: 50%;
left: 50%;
width: 30em;
height: 20em;
margin-left: -15em;
margin-top: -10em;
}
Das Element mit der ID "zentriert" wird zunächst so positioniert, dass dessen linke obere Ecke sich genau in der Mitte befindet (top:50%; left:50%;)
. Anschließend wird es mittels negativer Außenabstände um dessen halbe Breite nach links (margin-left:-15em;)
und um dessen halbe Höhe nach oben (margin-top:-10em;)
verschoben.
Fazit
Verzichte weitestgehend auf die hier dargestellten Methoden, da man mit ihnen ungewollt feste Größen für eine bestimmte Auflösung festlegt, die bei kleineren Viewports oft anders als beabsichtigt aussehen.
Nur die erste Variante mit Flexbox kommt ohne weitere Festlegungen von Breiten und Abständen aus.
Weblinks
- ↑ smashingmagazine.com: Absolute Horizontal And Vertical Centering In CSS vom 09.08.2013
- web.dev: Centering in CSS (en, Adam Argyle, 16.12.2020)
- css-tricks.com: Centering in CSS: A Complete Guide (en, Chris Coyier, 2.9.2014)
- SELFHTML-Forum: Bild als Vollbild, aber nur wenn groß genug (26.08.2014)