Tipps zum vertikalen Zentrieren von Bildern mithilfe von css_Experience Exchange

Die Schwierigkeit der Frage liegt in zwei Punkten:

Vertikal zentriert;
Das Bild ist ein Ersatzelement mit einigen besonderen Eigenschaften.​
Um das Problem zu beheben, finden Sie hier einen Kompromiss zwischen einer relativ sauberen, CSS-einfachen Lösung:

.box {
/*Vertikale Zentrierungsmethode, die von anderen Mainstream-Browsern als IE erkannt wird*/
Anzeige: Tabellenzelle;
Vertical-Align:Middle;

/*Horizontale Zentrierung festlegen*/
text-align:center;

/* Hack für IE */
*display: block;
*font-size: 175px;/* entspricht etwa 0,873 der Höhe, 200*0,873 entspricht etwa 175*/
*font-family:Arial;/*Verhindern Sie Hack-Fehlerprobleme, die durch Nicht-UTF-8 verursacht werden, wie z. B. GBK-Kodierung*/

width:200px;
Höhe:200px;
Rand: 1 Pixel durchgehend #eee;
}
.box img {
/*Stellen Sie das Bild so ein, dass es vertikal zentriert ist*/
Vertical-Align:Middle;
}

Natürlich gibt es noch andere Lösungen, auf die ich hier nicht näher eingehen werde.