图片垂直居中对齐的div+css方法,做网站重构的人大多数都知道，要实现整个页面居中，可以在body里面设置“margin:0 auto”来实现，要实现元素居中，可以设置“text-align:center”，但对于图片在页面中垂直居中就有点煞费脑筋了。 

我拿前段时间做的一个商城的网站来讲解一下。 

最终效果要做成如下所示： 


最初，给出的样式如下： 

.new_proimg{ 
　text-align:center; 
　height:120px; 
　margin-bottom: 5px; 
　border: 1px solid #eee; 
} 

但这种样式只能对图片进行水平居中对齐，垂直仍然不能居中，使显示非常不美观，如下： 



试用了好几种试，只有一种方式显示出来效果最好，把样式改为如下，在后面添加注释方便理解： 

.new_proimg{ 
　display: table-cell;　/*非IE的主流浏览器识别的垂直居中的方法*/ 
　vertical-align:middle;　/*非IE的主流浏览器识别的垂直居中的方法*/ 
　text-align:center;　/*设置水平居中*/ 
　*display: block;　/* 针对IE的Hack */ 
　*font-size: 104px;　/*约为高度的0.873，120*0.873 约为104*/ 
　*font-family:Arial; 　/*防止非utf-8引起的hack失效问题，如gbk编码*/ 
　width:120px;   
　height:120px; 
　margin-bottom: 5px; 
　border: 1px solid #eee; 
} 

如此就可以达到您所要的图片垂直居中的效果，方便简洁，而且实用。

上海网站制作，网站建设，网站制作http://www.web258.cn