How to make a picture vertically centered in CSS

Core tip: use a pure CSS to achieve an unknown size of the picture (but width are less than 200px) in a 200px square container horizontally and vertically centered

In the past Taobao ued recruitment has such a topic:

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

Of course, the topic is not random, but has its reality, vertical center is Taobao work most often encountered a problem, very representative.

The difficulty of the topic 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;

}

"/>