Wie Bild zentrieren?

Question

Accepted Answer

**Mit CSS zentrierst du ein Bild heute am einfachsten über den Container: horizontal mit `text-align: center;` oder robuster mit Flexbox; vertikal geht nur über den umgebenden Bereich, nicht „am Bild selbst“.**

## Horizontal zentrieren

Wenn das Bild allein in einem Block steht, funktioniert das zuverlässig so:

```html

```

```css
.box {
  text-align: center;
}
```

Das ist die einfache Lösung, aber nur für horizontales Zentrieren.

## Robuster mit Flexbox

Wenn das Bild exakt mittig sitzen soll, auch vertikal, ist Flexbox die bessere Lösung:

```html

```

```css
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}
```

Entscheidend ist: Die Höhe kommt auf den Container. Ohne definierte Höhe gibt es kein sichtbares vertikales Zentrieren.

## Häufiger Fehler

`margin: 0 auto;` funktioniert bei Bildern nur, wenn das Bild als Block-Element gesetzt ist:

```css
img {
  display: block;
  margin: 0 auto;
}
```

Standardmäßig ist `img` inline; dann greift diese Methode oft nicht wie erwartet.

## Klare Empfehlung

Für moderne Layouts ist **Flexbox fast immer die beste Lösung**, weil sie sauber, kurz und auch für vertikale Zentrierung geeignet ist. Wenn du nur schnell ein einzelnes Bild horizontal mittig haben willst, reicht `text-align: center;`.