CSS Spickzettel

Q: Wie zentriere ich ein div mit CSS?

Der einfachste moderne Weg ist Flexbox am Elternelement: `display: flex; justify-content: center; align-items: center;` zentriert ein Kind sowohl horizontal als auch vertikal. Für nur horizontale Zentrierung eines Block-Elements mit fester Breite funktioniert `margin: 0 auto` weiterhin.

Zuletzt aktualisiert 27. Mai 2026

Live im Web-Playground ausprobieren CSS kostenlos lernen

Selektoren

Wie du die Elemente ansprichst, die du stylen möchtest.

Selektor	Trifft auf
`*`	Alle Elemente
`p`	Alle `<p>`-Elemente (nach Tag)
`.btn`	Elemente mit `class="btn"`
`#main`	Das Element mit `id="main"`
`div p`	Alle `<p>` innerhalb eines `<div>` (Nachkomme)
`div > p`	Nur direkte Kinder
`a:hover`	Links beim Überfahren (Pseudoklasse)
`li:first-child`	Erstes `<li>` in seinem Elternelement
`li:nth-child(2n)`	Jedes gerade `<li>`
`input[type="text"]`	Eingaben mit diesem Attribut
`p::before`	Generierter Inhalt vor `<p>` (Pseudoelement)

Box-Modell

Jedes Element ist eine Box: Inhalt, Innenabstand, Rahmen, Außenabstand.

Eigenschaft	Funktion
`width` / `height`	Größe der Inhaltsbox
`padding`	Abstand innerhalb des Rahmens
`border`	`1px solid #333` - Breite, Stil, Farbe
`margin`	Abstand außerhalb des Rahmens
`box-sizing: border-box`	Lässt die Breite Padding + Rahmen einschließen
`margin: 0 auto`	Zentriert ein Block-Element horizontal
`overflow: hidden`	Schneidet überlaufenden Inhalt ab

Typografie & Farbe

Eigenschaft	Beispiel
`color`	`color: #333` - Textfarbe
`background`	`background: #fff` oder ein Bild/Verlauf
`font-family`	`font-family: system-ui, sans-serif`
`font-size`	`font-size: 16px` (oder `rem`, `em`)
`font-weight`	`400` (normal) … `700` (fett)
`line-height`	`1.5` - Abstand zwischen Zeilen
`text-align`	`left`, `center`, `right`, `justify`
`text-decoration`	`underline`, `none`

Flexbox

Eindimensionales Layout - Zeilen oder Spalten. Setze display: flex auf das Elternelement.

Eigenschaft (am Container)	Funktion
`display: flex`	Macht Kinder zu Flex-Elementen
`flex-direction`	`row` (Standard) oder `column`
`justify-content`	Ausrichtung entlang der Hauptachse (`center`, `space-between`)
`align-items`	Ausrichtung entlang der Querachse (`center`, `stretch`)
`gap`	Abstand zwischen Elementen, z. B. `gap: 16px`
`flex-wrap`	`wrap` lässt Elemente in neue Zeilen umbrechen
`flex: 1` (an einem Kind)	Element wächst, um verfügbaren Platz zu füllen

Grid

Zweidimensionales Layout. Setze display: grid auf das Elternelement.

Eigenschaft	Funktion
`display: grid`	Macht Kinder zu Grid-Elementen
`grid-template-columns`	`1fr 1fr 1fr` oder `repeat(3, 1fr)`
`grid-template-rows`	Definiert Zeilengrößen
`gap`	Abstand zwischen Zeilen und Spalten
`grid-column`	`1 / 3` - ein Element über Spalten erstrecken
`auto-fit` / `minmax`	`repeat(auto-fit, minmax(200px, 1fr))` für responsive Grids
`place-items: center`	Zentriert jedes Element in seiner Zelle

Positionierung & Anzeige

Eigenschaft / Wert	Funktion
`position: static`	Standard - im normalen Fluss
`position: relative`	Verschoben von seiner normalen Stelle
`position: absolute`	Positioniert relativ zum nächsten positionierten Vorfahren
`position: fixed`	Am Viewport fixiert
`position: sticky`	Klebt beim Scrollen ab einem Schwellenwert
`top` / `right` / `bottom` / `left`	Versätze für positionierte Elemente
`z-index`	Stapelreihenfolge (höher = oben)
`display: none`	Entfernt das Element aus dem Layout
`display: inline-block`	Fließt inline, akzeptiert aber Breite/Höhe

Übergänge & Transformationen

Eigenschaft	Beispiel
`transition`	`transition: all 0.2s ease`
`transform: translate`	`translate(10px, 0)` - verschieben
`transform: scale`	`scale(1.1)` - skalieren
`transform: rotate`	`rotate(45deg)`
`opacity`	`0` (unsichtbar) … `1` (deckend)
`box-shadow`	`0 2px 8px rgba(0,0,0,.15)`
`border-radius`	`8px` - abgerundete Ecken

Einheiten & responsives Design

Einheit / Funktion	Bedeutung
`px`	Absolute Pixel
`%`	Relativ zum Elternelement
`rem`	Relativ zur Wurzel-Schriftgröße
`em`	Relativ zur aktuellen Schriftgröße
`vw` / `vh`	1 % der Viewport-Breite / -Höhe
`fr`	Bruchteil des freien Platzes (Grid)
`@media (max-width: 600px) { … }`	Regeln unterhalb eines Breakpoints anwenden

Selektoren, das Box-Modell, Flexbox, Grid und die Eigenschaften, die du immer vergisst - auf einer Seite. Dieser CSS-Spickzettel ist eine Schnellreferenz zum Stylen und Layouten von Webseiten, vom Ansprechen von Elementen bis zum Zentrieren.

Alles hier ist Standard-CSS, das in modernen Browsern funktioniert. Kopiere eine Regel oder probiere sie live im HTML-Playground aus, wo du CSS mit einer Sofortvorschau bearbeiten kannst.

CSS-Spickzettel FAQ

Ist dieser CSS-Spickzettel kostenlos?

Ja. Dieser CSS-Spickzettel ist kostenlos und ohne Anmeldung. Setze ein Lesezeichen und nutze ihn, wann immer du einen Selektor, eine Eigenschaft oder ein Layout-Muster nachschlagen musst.

Sollte ich Flexbox oder Grid verwenden?

Verwende Flexbox für eindimensionale Layouts - eine Reihe von Schaltflächen, eine Navigationsleiste, Elemente in einer einzelnen Zeile oder Spalte. Verwende Grid für zweidimensionale Layouts, bei denen du Zeilen und Spalten gleichzeitig steuerst, etwa ein Seitenlayout oder eine Kartengalerie. Sie funktionieren gut zusammen: Ein Grid aus Karten, bei dem jede Karte intern Flexbox nutzt, ist üblich.

Wie zentriere ich ein div mit CSS?

Der einfachste moderne Weg ist Flexbox am Elternelement: display: flex; justify-content: center; align-items: center; zentriert ein Kind sowohl horizontal als auch vertikal. Für nur horizontale Zentrierung eines Block-Elements mit fester Breite funktioniert margin: 0 auto weiterhin.

Kann ich CSS online üben?

Ja. Öffne den HTML-Playground, um HTML und CSS zusammen mit einer Live-Vorschau zu schreiben. Wenn du Struktur möchtest, behandelt Coddys kostenloser interaktiver CSS-Kurs Selektoren, das Box-Modell, Flexbox und Grid Schritt für Schritt.

Ist dieser Spickzettel für Anfänger geeignet?

Ja. Er geht von Selektoren und dem Box-Modell (den Grundlagen) zu Flexbox, Grid und Übergängen über, sodass du mit den oberen Abschnitten beginnen und in modernes Layout hineinwachsen kannst.