Unknown size image vertical and horizontal centering problem in container_CSS/HTML

In CSS layout, vertical centering of images of unknown size has always been a headache. Standard browsers only need to set the line-height of the container and the vertical-align:middle; of the image. However, it is useless for IE. Several A few months ago, I saw a solution to IE on a foreign website . I didn’t think it was ideal, and I didn’t take it seriously. Recently, I often see friends asking similar questions, and I dug out the code and modified it for IE.

CSS
.box{
height:140px;
width:200px;
border: solid 1px #666;
text-align: center;/*Horizontally centered*/
line-height:140px;
font-size:126px;/*IE vertically centered here*/
}

.box[class] {
font-size:12px;/*Standard browsers require this value*/
}

img{
vertical-align:middle;/*Standard browser images are vertically centered* /
}

Originally, the font-size of the foreigner’s code was the same as the height. After trying it, the height of the container was a bit higher than that of the standard browser. I tried several times to reduce the font size by 100%. Ten container heights, this way, look about the same. The reason is still unclear.

The test was successful under IE5.5, IE6.0, FF1.5, and Opera9.0, but it is invalid for IE5.0 and IE7.0.