在网页实现的过程中，经常会遇到图片垂直居中【水平居中的话，“text-align:center;”即可搞定】的情况。有时难免会遇到图片大小不同，但是要垂直居中于大小一样的容器里，这时候就比较棘手了。以前练习的时候，总是用一样的图片进行排版，避重就轻。但是今天，面对这个问题，觉得有必要挑战一下自己，同时也为有同样困惑的朋友们做一下探讨。以下内容就是我做的总结，简单又实用。
简述：
将外部容器的显示模式设置成display:table-cell，【针对IE6/IE7】在img标签的前面插入一对空标签，这样span内部的内容就相当于表格，可以很方便的使用vertical-align属性来对齐其中的内容了。
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>方法-未知大小的图片居中</title> 4 <style type="text/css"> 5 .box{display:table-cell; width:100px; height:100px; text-align:center; vertical-align:middle; border:1px solid #999;} 6 /*万恶的IE hack代码*/ 7 .box span{display:inline-block; height:100%; vertical-align:middle;} 8 .box img{vertical-align:middle;} 9 </style> 10 </head> 11 12 <body> 13 <div class="box"> 14 <span></span><img src="icon01.jpg" width="44" height="44"/> 15 </div> 16 </body>
亲测可行~