CSS中让图片垂直居中的方法

浏览数：18 / 时间：2015年06月09日

　　　在网页实现的过程中，经常会遇到图片垂直居中【水平居中的话，“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>