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

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

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

方法一

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

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 4  <title>方法1 - 未知高度的图片垂直居中 - www.nowamagic.net</title>
 5 <style type="text/css">
 6    body {
 7    height:100%;
 8    }
 9    #box{
10     width:500px;height:400px;
11     display:table;
12     text-align:center;
13     border:1px solid #d3d3d3;background:#fff;
14    }
15    #box span{
16     display:table-cell;
17         vertical-align:middle;
18    }
19      #box img{
20     border:1px solid #ccc;
21     }
22     </style>
23     <!--[if lte IE 7]>
24     <style type="text/css">?
25     #box{
26         position:relative;
27         overflow:hidden;
28     }
29     #box span{
30         position:absolute;
31         left:50%;top:50%;
32     }
33     #box img{
34         position:relative;
35         left:-50%;top:-50%;
36     }
37     </style>
38     <![endif]-->
39      
40     </head>
41 
42 <body>
43 <div id="box">
44  <span><img src="images/demo_zl.png" alt="" /></span>
45 </div>
46  
47 </body>
48 </html>

方法二

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

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2     <head>
 3         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 4         <title>方法2 - 未知高度的图片垂直居中 - www.nowamagic.net</title>
 5      
 6     <style type="text/css">
 7     body {
 8         height:100%;
 9     }
10     #box{
11     width:500px;height:400px;
12     display:table-cell;
13     text-align:center;
14     vertical-align:middle;
15     border:1px solid #d3d3d3;background:#fff;
16     }
17     #box img{
18     border:1px solid #ccc;
19     }
20     </style>
21     <!--[if IE]>
22     <style type="text/css">?
23     #box i {
24         display:inline-block;
25         height:100%;
26         vertical-align:middle
27         }
28     #box img {
29         vertical-align:middle
30         }
31     </style>
32     <![endif]-->
33      
34      
35      
36     </head>
37      
38     <body>
39     <div id="box">
40         <i></i><img src="images/demo_zl.png" alt="" />
41     </div>
42      
43      
44     </body>
45     </html>

方法三

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

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2     <head>
 3         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 4         <title>方法3 - 未知高度的图片垂直居中 - www.nowamagic.net</title>
 5      
 6     <style type="text/css">
 7     body {
 8         height:100%;
 9     }
10     #box{
11         width:500px;height:400px;
12         text-align:center;
13         border:1px solid #d3d3d3;background:#fff;
14     }
15     #box p{
16         width:500px;height:400px;
17         line-height:400px;  /* 行高等于高度 */
18     }
19      
20     /* 兼容标准浏览器 */
21     #box p:before{
22         content:".";  /* 具体的值与垂直居中无关，尽可能的节省字符 */
23         margin-left:-5px; font-size:10px;  /* 修复居中的小BUG */
24         visibility:hidden;  /*设置成隐藏元素*/
25     }
26      
27     #box p img{
28         *margin-top:expression((400 - this.height )/2);  /* CSS表达式用来兼容IE6/IE7 */
29         vertical-align:middle;
30         border:1px solid #ccc;
31     }
32     </style>
33      
34     </head>
35      
36     <body>
37     <div id="box">
38         <p><img src="images/demo_zl.png" alt="" /></p>
39     </div>
40      
41     </body>
42     </html>