Tips for vertical center of Images Using CSS

There are two difficulties:

Vertical center;

An image is a replacement element and has some special features.

As for how to solve the problem, the following is a simple solution to weigh the relatively clean structure of CSS:

. Box {

/* Vertical center method recognized by mainstream non-ie browsers */

Display: Table-cell;

Vertical-align: middle;

/* Set the horizontal center */

Text-align: center;

/* Hack for IE */

* Display: block;

* Font-size: 175px;/* It is about 0.873 of the height, and 200*0.873 is about 175 */

* Font-family: Arial;/* prevents hack failures caused by non-UTF-8, such as GBK encoding */

Width: 200px;

Height: 200px;

Border: 1px solid # Eee;

}

. Box IMG {

/* Set the vertical center of the image */

Vertical-align: middle;

}

<Div class = "box">



</Div>

Of course, there are other solutions that we will not go into here,