Conseils pour centrer verticalement les images à l'aide de l'échange css_Experience

La difficulté de la question réside en deux points :

Centré verticalement ;
L'image est un élément de remplacement présentant des caractéristiques particulières.​
Quant à la façon de résoudre ce problème, voici un compromis entre une solution relativement propre et simple en CSS :

.box {
/*Méthode de centrage vertical reconnue par les navigateurs grand public autres que IE*/
affichage : table-cellule ;
vertical-align:middle;

/*Définir le centrage horizontal*/
text-align:center;

/* Hack pour IE */
*affichage : bloquer ;
*font-size : 175px;/* correspond à environ 0,873 de la hauteur, 200*0,873 correspond à environ 175*/
*font-family:Arial;/*Prévenir les problèmes d'échec de piratage causés par un code non utf-8, tel que l'encodage gbk*/

largeur:200px;
hauteur : 200px ;
bordure : 1px solide #eee ;
}
.box img {
/*Définir l'image pour qu'elle soit centrée verticalement*/
vertical-align:middle;
}

Bien sûr, il existe d’autres solutions, que je n’aborderai pas ici.