DIV内部图片垂直水平居中例子

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head > 
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   /> 
< title > title > 
< style  type ="text/css" >
.img_v {  
  /*
 IE6 IE7设置
 display:block                将元素将显示为块级元素。
 position:relative            生成相对定位的元素。
 
 其他浏览器
 display:table-cell;        此元素会作为一个表格元素显示。
 position:static;            默认值。没有定位。
  */  
 display: table-cell;  *display: block;  _display: block;
 position: static;  *position: relative;  _position: relative;   
 vertical-align: middle;   
 text-align: center;   
 overflow: hidden;
 width: 400px;   
 height: 400px;   
 border: 1px solid #000;
}   
 
.img_v a {   
  /*
 IE6 IE7设置
 display:block                将元素将显示为块级元素。
 position:absolute;            生成绝对定位的元素。
 top:50%                    元素的顶部边缘。
 left:50%                    元素的左部边缘。
 
 其他浏览器
 display:table-cell;        此元素会作为一个表格元素显示。
 position:static;            默认值。没有定位。
  */
 display: table-cell;  *display: block;  _display: block;
 position: static;  *position: absolute;  _position: absolute;   
 *top: 50%; _top: 50%;   
 left: 50%; _left: 50%;   
 width: 400px;    
}   
 
.img_v img {  
  /*
 IE6 IE7设置
 position:relative            生成相对定位的元素。
 top:-50%                    元素的顶部边缘。
 left:-50%                    元素的左部边缘。
 
 其他浏览器
 position:static            默认值。没有定位。
  */  
 position: static;  *position: relative;  _position: relative;   
 *top: -50%;  _top: -50%;   
 *left: -50%;  _left: -50%;   
}   
style > 
 
head > 
 
< body > 
< div  class ="img_v" > 
   < a  href ="#" >< img  src ="你的图片地址.jpg" > a > 
div > 
body > 
html > 

转载于:https://www.cnblogs.com/huanghai/archive/2012/10/28/2743113.html