Using CSS to achieve vertical center of the image of the use of skills _ experience Exchange

The difficulty of the topic lies in two points:

vertically centered;
The picture is a permutation element, with some special features.
As to how to solve, here is a tradeoff between the relative structure of clean, CSS simple solution:

. 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;
}





Of course there are other solutions, not to delve into this,

