CSS让图片垂直居中的几种技巧

在网页设计过程中，有时候会希望图片垂直居中的情况。而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战。下面总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。

方法一

将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样span内部的内容就相当于表格，可以很 方便的使用vertical-align属性来对齐其中的内容了。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>方法1 - 未知高度的图片垂直居中 - www.nowamagic.net</title>
<style type="text/css">
   body {
   height:100%;
   }
   #box{
    width:500px;height:400px;
    display:table;
    text-align:center;
    border:1px solid #d3d3d3;background:#fff;
   }
   #box span{
    display:table-cell;
        vertical-align:middle;
   }
     #box img{
    border:1px solid #ccc;
    }
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">?
    #box{
        position:relative;
        overflow:hidden;
    }
    #box span{
        position:absolute;
        left:50%;top:50%;
    }
    #box img{
        position:relative;
        left:-50%;top:-50%;
    }
    </style>
    <![endif]-->

    </head>

<body>
<div id="box">
 <span><img src="data:images/demo_zl.png" alt="" /></span>
</div>

</body>
</html>

方法二

标准浏览器的情况还是和上面一样，不同的是针对IE6/IE7利用在img标签的前面插入一对空标签的办法。

 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
         <title>方法2 - 未知高度的图片垂直居中 - www.nowamagic.net</title>

     <style type="text/css">
     body {
         height:100%;
     }
     #box{
     width:500px;height:400px;
     display:table-cell;
     text-align:center;
     vertical-align:middle;
     border:1px solid #d3d3d3;background:#fff;
     }
     #box img{
     border:1px solid #ccc;
     }
     </style>
     <!--[if IE]>
     <style type="text/css">?
     #box i {
         display:inline-block;
         height:100%;
         vertical-align:middle
         }
     #box img {
         vertical-align:middle
         }
     </style>
     <![endif]-->

     </head>

     <body>
     <div id="box">
         <i></i><img src="data:images/demo_zl.png" alt="" />
     </div>

     </body>
     </html>

方法三

在img标签外包裹一个p标签，标准浏览器利用p标签的伪类属性:before来实现居中，另外，对于IE6/IE7使用了CSS表达式来实现兼容。

 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
         <title>方法3 - 未知高度的图片垂直居中 - www.nowamagic.net</title>

     <style type="text/css">
     body {
         height:100%;
     }
     #box{
         width:500px;height:400px;
         text-align:center;
         border:1px solid #d3d3d3;background:#fff;
     }
     #box p{
         width:500px;height:400px;
         line-height:400px;  /* 行高等于高度 */
     }

     /* 兼容标准浏览器 */
     #box p:before{
         content:".";  /* 具体的值与垂直居中无关，尽可能的节省字符 */
         margin-left:-5px; font-size:10px;  /* 修复居中的小BUG */
         visibility:hidden;  /*设置成隐藏元素*/
     }

     #box p img{
         *margin-top:expression((400 - this.height )/2);  /* CSS表达式用来兼容IE6/IE7 */
         vertical-align:middle;
         border:1px solid #ccc;
     }
     </style>

     </head>

     <body>
     <div id="box">
         <p><img src="data:images/demo_zl.png" alt="" /></p>
     </div>

     </body>
     </html>

文章来自：http://www.nowamagic.net/librarys/veda/detail/1950