在网页实现的过程中，经常会遇到图片垂直居中【水平居中的话，“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>
亲测可行~
时间： 2024-10-13 07:31:31