CSS: Vertical center of picture

The picture is centered vertically in the container in several ways:

1. In the table (the simplest and most straightforward method)

<Tablestyle= "height:200px;border:1px solid #000;"><TR><TD><imgsrc= "Http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /></TD></TR></Table>

2, add a 0 width, 100% height of the picture. And both images are set to: Vertical-align:middle

<Divstyle= "height:200px;border:1px solid #000;">    <imgsrc= "Http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg"style= "Vertical-align:middle;"/>    <imgsrc=""style= "Height:100%;width:0px;vertical-align:middle;"/><!--Add a 0-width, 100%-height picture -</Div>

3, single picture horizontal vertical Center One Amoy use scheme

<styletype= "Text/css">. Box{        /*Vertical Centering method for non-ie mainstream browser recognition*/Display:Table-cell;vertical-align:Middle;        /*Set Horizontal Center*/text-align:Center;        /*hack for IE*/*display:Block;*font-size:175px;/*About the height of the 0.873,200*0.873 is about 175*/       /**font-family:arial prevent non-utf-8 hack failure problems, such as GBK coding*/width:200px;Height:200px;Border:1px solid #000;}. Box img{        /*Set picture vertically centered*/vertical-align:Middle;}</style><Divclass= "box"><imgsrc= "Http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /></Div>

4, in the picture and container height, are known cases, calculation margin-top (not recommended)

is container height 200px, such as film height 95px

<style= "height:200px;border:1px solid #000;" >    <  src= "Http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg"  Style= "margin-top:52.5px;" /> </ Div >

CSS: Vertical center of picture