Detailed explanation of how to vertically center images in CSS

[Introduction] In the past Taobao UED recruitment, there was such a question: "Use pure CSS to realize the horizontal and vertical centering of an unknown size image (but the height and width are less than 200px) in a 200px square container." Of course, the question It is not random, but has its own practical reasons. Vertical centering is the most important thing in Taobao work. In the past Taobao UED recruitment, there was such a question:

"Using pure CSS to achieve unknown sizes The picture (but the height and width are less than 200px) are horizontally and vertically centered in a 200px square container. "

Of course, the question is not random, but has its own practical reasons. Vertical centering is the most important thing in Taobao work. A frequently encountered problem is very representative.

The difficulty of the question lies in two points:

1. Vertically centered;

2. The picture is a replacement element with some special characteristics.

As for how to solve it, here’s a trade-off of a relatively clean, CSS-simple solution:

.box {

/ *Vertical centering method recognized by mainstream browsers other than IE*/

display: table-cell;

vertical-align:middle;

/*Set horizontal centering*/

text-align:center;

/* Hack for IE */

*display: block ;

*font-size: 175px;/*About 0.873 of the height, 200*0.873 is about 175*/

*font-family:Arial;/ *Prevent hack failure problems caused by non-utf-8, such as gbk encoding*/

width:200px;

height:200px;

border : 1px solid #eee;

}

.box img {

/*Set the image to be vertically centered*/

vertical-align: middle;

}

The above is the detailed content of Detailed explanation of how to vertically center images in CSS. For more information, please follow other related articles on the PHP Chinese website!