CSS to achieve a vertical image center method

CSS picture vertically centered problem, I have been plagued for a long time, today can finally be summed up.

Method One: Using positioning

HTML structure such as:

The code is as follows	Copy Code
<div class= "box" > <a class= "Pic-wrap" href= "#" target= "_blank" > </a> </div>

CSS code such as:

code is as follows

copy code

Body {  margin:0;  padding:0;  font:12px/1.5 tahoma,arial; } . box {  width:220px  height:220px  border:1px solid #F30;  margin:100 PX Auto 0;  display:table; } . pic-wrap {  display:table-cell  text-align:center;  vertical-align:middle; /* is primarily targeted at IE6, 7 hack*/ . box {  *position:relative; } . pic-wrap {  *width:100%  *position:absolute;  *top:50%;  *left:0; &nbs p;/* the font inherited from the body affects IE6, setting the default Windows system font */  _font-family:sans-serif; } . pic-wrap img {  *position:relative  *top: -50%;  *left:0;  /* has default height in IE Hollow text node */  vertical-align:middle9;  /* in IE, the IMG tag in a label defaults to a blue border */  border:none9; }

Method Two:

HTML structure ditto;

CSS code such as:

because IE has a default height for empty text nodes

code is as follows

copy code

. box {  width:220px;  height:220px;  border:1px so Lid #F30;  margin:100px Auto 0; } . pic-wrap {  display:table-cell  vertical-align:middle;  width:220px; & nbsp;height:220px;  text-align:center;  /*ie6, 7 does not support display:table-cell*/  *display:block  *font-size:192px;/* Font size is height* 0.783 or height/1.14, this is about 192px*/  _font-family:sans-serif;/* To set the font, otherwise there will be a pixel deviation of the IE6 */ } . pic-wrap img {  border:none;  vertical-align:middle;/* Set */

"Note that when you set the font for the BODY element in CSS, the second method will fail under IE7."

Best Practices:

CSS code such as:

code is as follows

copy code

body {  margin:0;  padding:0;  font:12px/1.5 Tahoma, Arial } . box {  width:220px  height:220px  border:1px solid #F30;  margin:100 PX Auto 0; } . pic-wrap {  display:table-cell  vertical-align:middle;  width:220px; & nbsp;height:220px;  text-align:center;  /*ie6, 7 does not support display:table-cell*/  *display:block;  _font-size:192px;  + line-height:220px; /* Set IE7 Hollow text node row height to 220px*/  _font-family:sans-serif; . pic-wrap img {  border:none  vertical-align:middle9; /* Due to a default height in IE empty text node */ }