9.1 Horizontale Zentrierung
Elemente zentrieren auf einer Webseite ist eine der grundlegenden Aufgaben des Webdesigns. Es hilft dabei, ästhetische und leicht lesbare Layouts zu erstellen. Im Folgenden betrachten wir verschiedene Methoden zur horizontalen und vertikalen Zentrierung von Elementen unter Verwendung moderner CSS-Techniken.
1. Zentrierung von Blockelementen mit margin: auto
Eine der einfachsten Methoden zur Zentrierung von Blockelementen ist die Verwendung von margin: auto.
Beispiel:
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
margin: 0 auto;
}
<div class="centered-box"></div>
Codeerklärung:
margin: 0 auto;: setzt automatische Abstände links und rechts, um das Element horizontal zu zentrieren
2. Zentrierung von Inline-Elementen mit text-align
Um Inline- oder eingebettete Elemente innerhalb eines Blockelements zu zentrieren, kann die Eigenschaft text-align: center verwendet werden.
Beispiel:
.container {
text-align: center;
background-color: #f1c40f;
padding: 20px;
}
.inline-element {
background-color: #e74c3c;
display: inline-block;
padding: 10px;
color: white;
}
<div class="container">
<div class="inline-element">Inline-Element</div>
</div>
Codeerklärung:
text-align: center;: zentriert eingebettete (Inline-)Elemente innerhalb eines Blockcontainers
3. Zentrierung von Elementen mit Flexbox
Flexbox bietet eine flexible und einfache Möglichkeit, Elemente sowohl horizontal als auch vertikal zu zentrieren.
Beispiel:
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2ecc71;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="flex-container">
<div class="centered-box"></div>
</div>
Codeerklärung:
display: flex;: setzt den Container als Flexboxjustify-content: center;: zentriert die Elemente horizontalalign-items: center;: zentriert die Elemente vertikal (wird weiter unten ausführlicher betrachtet)
9.2 Vertikale Zentrierung
1. Zentrierung mit Flexbox
Flexbox bietet eine einfache Methode zur vertikalen Zentrierung von Elementen.
Beispiel:
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2ecc71;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="flex-container">
<div class="centered-box"></div>
</div>
Codeerklärung:
align-items: center;: zentriert die Elemente vertikal
2. Zentrierung mit CSS Grid
CSS Grid bietet mächtige Möglichkeiten zur Zentrierung von Elementen:
.grid-container {
display: grid;
place-items: center;
height: 100vh;
background-color: #9b59b6;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="grid-container">
<div class="centered-box"></div>
</div>
Codeerklärung:
display: grid;: setzt den Container als CSS Gridplace-items: center;: zentriert die Elemente horizontal und vertikal
3. Vertikale Zentrierung mit absoluter Positionierung und CSS-Transformation
Durch die Verwendung von absoluter Positionierung und CSS-Transformation kann man Elemente vertikal zentrieren.
Beispiel:
.container {
position: relative;
height: 100vh;
background-color: #e74c3c;
}
.centered-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="container">
<div class="centered-box"></div>
</div>
Codeerklärung:
position: absolute;: setzt das Element in absolute Position im Verhältnis zum Containertop: 50%;,left: 50%;: verschiebt das Element um 50% vom oberen und linken Rand des Containerstransform: translate(-50%, -50%);: verschiebt das Element um 50% seiner Breite und Höhe zur Zentrierung
4. Vertikale Zentrierung mit Tabelle und Zellen
Verwendung von Tabelle und Zellen zur vertikalen Zentrierung von Elementen.
Beispiel:
.table-container {
display: table;
width: 100%;
height: 100vh;
background-color: #f39c12;
}
.table-cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-box {
display: inline-block;
background-color: #3498db;
padding: 20px;
color: white;
}
<div class="table-container">
<div class="table-cell">
<div class="centered-box">Zentriertes Element</div>
</div>
</div>
Codeerklärung:
.table-container: erstellt einen Container mit Displaytable.table-cell: erstellt eine Tabellenzelle mit vertikaler Ausrichtungmiddle
GO TO FULL VERSION