Bild vertikal zentrieren

Da es sich bei einem <img> um ein Inline-Element handelt, lässt sich dieses in CSS horizontal mit text-align und vertikal mit vertical-align ausrichten. Eine Zentrierung innerhalb eines Blockelementes könnte also folgendermaßen ausschauen:

<div class="image-box">
    <img src="test.png" alt="">
</div>

div.image-box {
    width: 160px;
    height: 160px;
    line-height: 160px;
    text-align: center;
}
div.image-box img {
    vertical-align: middle;
}

Die Eigenschaft text-align wird hierbei dem umgebenden Blockelement zugeordnet, die Eigenschaft vertical-align dem enthaltenen Bild. Zudem muss die Höhe des Blockelements (nicht nur als height, sondern auch) als line-height definiert werden.

Im Resultat bemerkt man allerdings, dass das Bild vertikal nicht punktgenau zentriert ist, sondern um ein, zwei Pixel nach oben verschoben scheint. Nur innerhalb einer Tabellenzelle funktioniert eine exakte vertikale Zentrierung. Ein Workaround bestand deswegen darin, das Eltern-Element des Bildes per „display: table-cell“ dazu zu bringen, dass es sich wie eine Tabellenzelle verhält. Hierbei werden sowohl dem Eltern-Element als auch dem Bild ein „vertical-align: middle“ zugeordnet:

div.image-box {
    display: table-cell;
    width: 160px;
    height: 160px;
    text-align: center;
    vertical-align: middle;
}
div.image-box img {
    vertical-align: middle;
}

In diesem Fall ist das Bild auch vertikal genau zentriert ausgerichtet.

Muss keine ältere Browserversion (wie z.B. der IE9) mehr unterstützt werden, bietet es sich inzwischen aber an, das umgebende Blockelement einfach als Flexbox zu definieren und das enthaltene Bild mittels justify-content und align-items auszurichten. Das Bild selbst benötigt hier keine zusätzlichen CSS-Definitionen mehr:

div.image-box {
    display: flex;
    width: 160px;
    height: 160px;
    justify-content: center;
    align-items: center;
}