Problème de centrage vertical et horizontal de l'image de taille inconnue dans conteneur_CSS/HTML

Dans la mise en page CSS, le centrage vertical des images de taille inconnue a toujours été un casse-tête. Les navigateurs standard n'ont besoin que de définir la hauteur de ligne du conteneur et le vertical-align:middle; Il y a quelques mois, j'ai vu une solution pour IE sur un site Web étranger . Je ne pensais pas que c'était idéal et je ne l'ai pas pris au sérieux. Récemment, je vois souvent des amis poser des questions similaires, et j'ai extrait le code et l'ai modifié pour IE.

CSS
.box{
hauteur:140px;
largeur:200px;
bordure : solide 1px #666;
alignement du texte : center;/*Centré horizontalement*/
line-height:140px;
font-size:126px;/*IE centré verticalement ici*/
}

.box[class] {
font-size:12px;/*Les navigateurs standards nécessitent cette valeur*/
}

img{
vertical-align:middle;/*Les images des navigateurs standards sont centrées verticalement* /
}

À l'origine, la taille de la police du code de l'étranger était la même que la hauteur. Après l'avoir essayé, la hauteur du conteneur était un peu plus élevée que celle du navigateur standard. pour réduire la taille de la police de 100 %. Dix hauteurs de conteneur, de cette façon, se ressemblent. La raison n'est toujours pas claire.

Le test a réussi sous IE5.5, IE6.0, FF1.5 et Opera9.0, mais il n'est pas valide pour IE5.0 et IE7.0.