芜湖网站建设在给客户开发网站当中，遇到图片大小不一，无法固定尺寸，所以程序员在网页实现的过程中，经常会遇到图片垂直居中【水平居中的话，“text-align:center;”即可搞定】的情况。有时难免会遇到图片大小不同，但是要垂直居中于大小一样的容器里，这时候就比较棘手了。以前练习的时候，总是用一样的图片进行排版，避重就轻。以下内容就是我做的总结，简单又实用。

将外部容器的显示模式设置成display:table-cell，【针对IE6/IE7】在img标签的前面插入一对空标签，这样span内部的内容就相当于表格，可以很方便的使用vertical-align属性来对齐其中的内容了。

<style type="text/css">

.box{display:table-cell; width:100px; height:100px; text-align:center; vertical-align:middle; border:1px solid #999;}

/*万恶的IE hack代码*/

.box span{display:inline-block; height:100%; vertical-align:middle;}

.box img{vertical-align:middle;}

</style>

<div class="box">

<span></span><img src="icon01.jpg"  />

</div>

</body>