CSS to solve the vertical center of the picture method

The vertical center of the picture is often encountered in the DIV+CSS layout, the following question we study and give a solution!

The goal is to use a pure CSS to implement an unknown size picture (but width is less than 200px) centered horizontally and vertically in a 200px square container.

The difficulty is two points:

1. vertically centered;
2. The picture is a permutation element with some special characteristics.
As for how to solve, here is a trade-off between the relative structure of clean, CSS simple workaround:

. box {
/* Non-IE's mainstream browser recognized vertical Center method * *
Display:table-cell;
Vertical-align:middle;

/* Set Horizontal Center *
Text-align:center;

/* for IE hack * *
*display:block;
*font-size:175px;/* about the height of the 0.873,200*0.873 about 175*/
*font-family:arial;/* prevent hack failure caused by utf-8, such as GBK code

width:200px;
height:200px;
border:1px solid #eee;
}
. box img {
/* Set Picture Vertical Center * *
Vertical-align:middle;
}

<div class= "box" >

</div>

Of course there are other solutions, do not delve into this, more information please visit Arisisi www.alixixi.com web page Production Tutorial Network _web development Home