Vertical and horizontal centering of unknown size images in known containers_CSS/HTML

Unless otherwise stated, the content on this site is created with sharing authorization and is for non-commercial use. Please respect the fruits of your labor.

In CSS layout, the vertical centering of unknown size images 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, but it is useless for IE. , I saw a solution to IE on a foreign website a few months ago. I felt it was not very 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;/*Horizontal center */
line-height:140px;
font-size:126px;/*IE is vertically centered here*/
}
.box[class]{
font-size:12px ;/*Standard browsers require this value*/
}
img{
vertical-align:middle;/*Standard browser images are vertically centered*/
}

Original The font-size of the foreigner code is the same as the height. After trying it, the height of the container is a bit higher than that of the standard browser. I tried several times to subtract 10% of the height of the container from the font size. In this way, it looks almost the same. . The reason is still unclear.

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