之前在修改一个贸易综合网站遇到了在一个固定框架产品列表中的图片出现了垂直不居中的问题，后来发现原来是图片的大小不同造成的，可能大家都知道在div里用css控制图片水平居中可用text-align:center来控制水平居中，而图片垂直居中可能就会想到用vertical-align属性来控制，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。
那用div+css如何控制垂直居中呢？一般可用padding-top：X% 来控制，但这样对于单张图片或多图片但图片大小都相同时是管用滴！但如果图片大小不一样时问题就出现了。当图片较小时 它会偏向上，较大时可能在固定的框架里它就会出界了，这样就不能实现图片垂直居中了。那该怎么办呢？如果非要用div+css来解决的话可能就得套N个层这样不但麻烦也不利于优化。 但用table就很容易就解决了。因为table的默认属性就是垂直居中的，再控制一下水平居中就可以解决图片上下左右居中的问题了。

所以嘛！DIV+TABLE+CSS结合的网站才是最实用的，最能简化代码的，更有利于优化。

顺便总结一下文字垂直居中
一、单行垂直居中
如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。
如：  div { height:25px; line-height:25px;}

二、多行未知高度文字的垂直居中
如果一段内容，它的高度是可变的那么就可以设定Padding，使上下的padding值相同即可。同样的，这也是一种“看起来”的垂直居中方式，它只不过是使文字把<div>完全填充的一种访求而已。可以使用类似下面的代码：
div {  
  padding:25px 0;  
}
这种方法的优点就是它可以在任何浏览器上运行，并且代码很简单，只不过这种方法应用的前提就是容器的高度必须是可伸缩的。

三、多行文本固定高度的垂直居中
上面已经说过css中的vertical—align属性只会对拥有valign特性的（X）HTML标签起作用，但是在css中还有一个display属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素。
如：
#wrap {  
 height:500px;  
 display:table;  
}  
#content {  
  vertical-align:middle;  
  display:table-cell;  
  border:1px solid #FF0099;  
  background-color:#FFCCFF;  
  width:600px;  
}
<div  id=”wrap”>
<div  id=”content”>
<pre>
显示多文本行的固定高度的垂直居中
显示多文本行的固定高度的垂直居中
显示多文本行的固定高度的垂直居中
</pre>
</div>
</div> 
这个方法本来是可以很理想的，但很不幸的是在IE6并不能正确的理解display：table和display：table-cell，因此在IE6中无效。真是让人遗憾啊! 不过还是有其他办法解决滴！具体的请待续!