html css 图片居中-CSDN博客

与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了

自己写的一个，图片上下居中需要建立两个div 最外侧div 需要引入 jz_out类，里面div需要引入 jz_in类即可，兼容 ie8，360等

<!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=utf-8" />
<title>无标题文档</title>

<style >
.userinfo_editor {
position:absolute;
width: 1000px;
height: 800px;
border:ridge 1px red;
left: 0px;
top: 10px;
}
.jz_out{
display: table;
}
.jz_in {
display: table-cell;
text-align: center;
vertical-align: middle;
background-color: #FFFFFF;

}
</style>
</head>
<body>
<div class="userinfo_editor jz_out">
<div class="jz_in" href="#" target="_blank">
<img src="http://img01.taobaocdn.com/tps/i1/T1LeeNXodaXXXXXXXX-130-150.png">sss</div>
</div>
</div>
</body>
</html>

以下为网上搜的

方法一：利用定位

HTML结构如：

 
  < 
  div  
  class="box"> 
 

 
  < 
  a  
  class="pic-wrap" href="#" target="_blank">

 
  < 
  img  
  src="http://img01.taobaocdn.com/tps/i1/T1LeeNXodaXXXXXXXX-130-150.png">

 
  </ 
  a 
  >

 
  </ 
  div 
  > 
 

CSS代码如：

 
     body { 
    
     margin 
     :  
     0 
     ; 
    
     padding 
     :  
     0 
     ; 
    
     font 
     :  
     12px 
     / 
     1.5  
     tahoma 
     , 
     arial 
     ; 
    
     } 
    
     .box { 
    
     width 
     :  
     220px 
     ; 
    
     height 
     :  
     220px 
     ; 
    
     border 
     :  
     1px  
     solid  
     #F30 
     ; 
    
     margin 
     :  
     100px  
     auto  
     0 
     ; 
    
     display 
     : table; 
    
     } 
    
     .pic-wrap { 
    
     display 
     :  
     table-cell 
     ; 
    
     text-align 
     :  
     center 
     ; 
    
     vertical-align 
     :  
     middle 
     ; 
    
     } 
    
     /*主要针对IE6、7的hack*/ 
    
     .box { 
    
     * 
     position 
     :  
     relative 
     ; 
    
     } 
    
     .pic-wrap { 
    
     * 
     width 
     :  
     100% 
     ; 
    
     * 
     position 
     :  
     absolute 
     ; 
    
     * 
     top 
     :  
     50% 
     ; 
    
     * 
     left 
     :  
     0 
     ; 
    
     /*继承自body的字体会影响到ie6，设置默认的windows系统字体*/ 
    
     _font-family 
     :  
     sans-serif 
     ; 
    
     } 
    
     .pic-wrap img { 
    
     * 
     position 
     :  
     relative 
     ; 
    
     * 
     top 
     :  
     -50% 
     ; 
    
     * 
     left 
     :  
     0 
     ; 
    
     /*在ie中空文本节点有默认高度*/ 
    
     vertical-align 
     :  
     middle 
     \ 
     9 
     ; 
    
     /*在ie中，a标签中的img标签默认有蓝色边框*/ 
    
     border 
     :  
     none 
     \ 
     9 
     ; 
    
     }

方法二：

HTML结构同上,

CSS代码如：

 
  .box { 
 

 
  width 
  :  
  220px 
  ;

 
  height 
  :  
  220px 
  ;

 
       
  border 
  :  
  1px  
  solid  
  #F30 
  ; 
 

 
       
  margin 
  :  
  100px  
  auto  
  0 
  ; 
 

}

 
  .pic-wrap { 
 

 
  display 
  :  
  table-cell 
  ;

 
  vertical-align 
  :  
  middle 
  ;

 
  width 
  :  
  220px 
  ;

 
  height 
  :  
  220px 
  ;

 
  text-align 
  :  
  center 
  ;

 
  /*ie6、7不支持display:table-cell*/

 
       
  * 
  display 
  :  
  block 
  ; 
 

 
       
  * 
  font-size 
  :  
  192px 
  ;  
  /*字体大小为height*0.783或者height/1.14,这里约为192px*/ 
 

 
       
  _font-family 
  :  
  sans-serif 
  ;  
  /*设置字体，否则在ie6下会有一个像素的偏差*/ 
 

}

 
  .pic-wrap img { 
 

 
  border 
  :  
  none 
  ;

 
       
  vertical-align 
  :  
  middle 
  ;  
  /*由于ie下空文本节点有默认高度，所以设置*/       
 

}

【注意，当在css中设置了body元素字体的话，那么方法二在ie7下会失效的】

最佳方法：

CSS代码如：

 
     body { 
    
     margin 
     :  
     0 
     ; 
    
     padding 
     :  
     0 
     ; 
    
     font 
     :  
     12px 
     / 
     1.5  
     tahoma 
     , 
     arial 
     ; 
    
     } 
    
     .box { 
    
     width 
     :  
     220px 
     ; 
    
     height 
     :  
     220px 
     ; 
    
     border 
     :  
     1px  
     solid  
     #F30 
     ; 
    
     margin 
     :  
     100px  
     auto  
     0 
     ; 
    
     } 
    
     .pic-wrap { 
    
     display 
     :  
     table-cell 
     ; 
    
     vertical-align 
     :  
     middle 
     ; 
    
     width 
     :  
     220px 
     ; 
    
     height 
     :  
     220px 
     ; 
    
     text-align 
     :  
     center 
     ; 
    
     /*ie6、7不支持display:table-cell*/ 
    
     * 
     display 
     :  
     block 
     ; 
    
     _font-size 
     :  
     192px 
     ; 
    
     + 
     line-height 
     :  
     220px 
     ;  
     /*设置ie7中空文本节点行高为220px*/ 
    
     _font-family 
     :  
     sans-serif 
     ; 
    
     } 
    
     .pic-wrap img { 
    
     border 
     :  
     none 
     ; 
    
     vertical-align 
     :  
     middle 
     \ 
     9 
     ; 
     /*由于ie中有默认高度的空文本节点*/ 
    
     }