Several tips for CSS to vertically center a picture

In the process of web design, sometimes you want the picture to be centered vertically. Also, the height of the image that needs to be vertically centered is not certain, which poses a challenge to the layout of the page. Here is a summary of some of the methods used to make the picture vertical center, in addition to the first method is limited to the standard browser, the other two methods of compatibility is good.

Method One

Set the external container display mode to display:table, the meaning of this setting does not have to say more ... the IMG tag is nested outside a span label and set the display mode of span to Display:table-cell so that the content inside the span is equivalent to a table, It is convenient to use the Vertical-align property to align the contents.

Method Two
The standard browser is still the same as above, the difference is that for IE6/IE7 to use the IMG tag before inserting a pair of empty tags.
Method Three
The 
 Wraps a P tag outside the IMG tag, and the standard browser uses the pseudo-class attribute of the P tag: before to be centered, and for ie6/ie7 to use a CSS expression to achieve compatibility. 
 Several tips for how to center a picture vertically in CSS