之前在修改一个贸易综合网站遇到了在一个固定框架产品列表中的图片出现了垂直不居中的问题，后来发现原来是图片的大小不同造成的，可能大家都知道在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相等即可。 [...]