Using CSS to vertically center a picture within a div

A DIV is known to have an IMG, both of which do not know the height, but the height of the image must be less than the height of the div

The code is as follows:

. box {
/* Vertical Centering method recognized by the mainstream browser of non IE */
Display:table-cell;
Vertical-align:middle;
/* Set Horizontal Center */
Text-align:center;
/* Hack for IE * *
*display:block;
*font-size:175px;/* about a height of 0.873,200*0.873 about 175*/
*font-family:arial;/* prevent non-utf-8 caused by hack failure problems, such as GBK encoding */
width:200px;
height:200px;
border:1px solid #eee;
}
. box img {
/* Set Picture vertically centered */
Vertical-align:middle;
}
<div class= "box" >

</div>

Using CSS to vertically center a picture within a div