Examples of vertical and horizontal center of images in a fixed height container in css

This "novelty" solution seen on a website (freeappstools) is novel, mainly because it has not been mentioned in various Summary methods in China and is quoted in quotation marks, it is only because many people know the principle that the line-height method is used.

Line-height does not work for img elements:

The code is as follows:	Copy code
<Div style = "height: 250px; background: # ccc; line-height: 250px; width: 400px; text-align: center;"> </Div>

Line-height is used for text in the box, and the image is aligned with the baseline of the text:

The code is as follows:	Copy code
<Div style = "height: 250px; background: # ccc; line-height: 250px; width: 400px; text-align: center"> A test paragraph </Div>

 

Set vertical-align: middle of img to center the image vertically:

The code is as follows:	Copy code
<Div style = "height: 250px; background: # ccc; line-height: 250px; width: 400px; text-align: center"> A test paragraph </Div>

 

So someone has done this: (set font-size: 1px, set the font color to the same as the background color, set the left indent-1px, and the picture is perfectly vertical and horizontally centered, note ". ")

 

The code is as follows:	Copy code
<Div style = "height: 250px; background: # ccc; line-height: 250px; font-size: 1px; width: 400px; text-align: center; text-indent: -1px; color: # ccc "> . </Div>

 

The above method has passed IE7 +, FF, Chrome testing ~~

Or, if you do not need to be compatible with earlier IE versions, you can directly use the: after pseudo class to process this ".",
Div: after {content :"."}