div+css垂直居中顯示

div+css垂直居中顯示

效果圖：

1.兼容到ie7+

HTML:

<div class="nav">    
	   <div class="cell">    
	        <div class="cell_ct">    
	            <img src="img/1.jpg">    
	            <img src="img/2.jpg">    
	            <img src="img/3.jpg">    
	        </div>    
	   </div>    
   </div>  
</span>

CSS:

.nav{height:100%; width:151px; top:0px; right:0px; display:table; position:fixed;}
.nav .cell{display:table-cell;zoom:1; vertical-align:middle;position:relative;*top:50%;}
.nav .cell .cell_ct{*top:-50%; position:relative}
.nav .cell .cell_ct img{margin-top:3px; display:block;}</span>

代碼下載

http://download.csdn.net/download/u010127996/9581987

說明：若只用兼容到ie8,使用display:table-cell;和display:table就可以了

HTML:

   <div class="nav">    
	   <div class="cell">       
	        <img src="img/1.jpg">    
	        <img src="img/2.jpg">    
	        <img src="img/3.jpg">        
	   </div>    
   </div>   

CSS:

.nav{height:100%; width:151px; top:0px; right:0px; display:table; position:fixed;}  
.nav .cell{display:table-cell;zoom:1; vertical-align:middle;}  

代碼下載

http://download.csdn.net/download/u010127996/9581871