做网站重构的人大多数都知道，要实现整个页面居中，可以在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;
}

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