Tips for vertically centering images using css_Experience exchange

The difficulty of the question lies in two points:

Vertically centered;
The picture is a replacement element with some special characteristics.​
As for how to solve it, here’s a trade-off of relatively structurally clean, CSS-simple workarounds:

.box {
/*Vertical centering method recognized by mainstream browsers other than IE*/
display: table-cell;
vertical-align:middle;

/*Set horizontal centering*/
text-align:center;

/* Hack for IE */
*display: block;
*font-size: 175px;/* is about 0.873 of the height, 200*0.873 is about 175*/
*font-family:Arial;/*Prevent hack failure problems caused by non-utf-8, such as gbk encoding*/

width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
/*Set the image to be vertically centered*/
vertical-align:middle;
}

Of course there are other solutions, which I won’t delve into here.