在网页设计过程中，有时候会希望图片垂直居中的情况。而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战。下面总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。
方法一
将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样span内部的内容就相当于表格，可以很 方便的使用vertical-align属性来对齐其中的内容了。
01 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
02 |
<head> |
03 |
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> |
04 |
<title>方法1 - 未知高度的图片垂直居中 - www.springload.cn</title> |
05 |
<style type="text/css"> |
06 |
body { |
07 |
height:100%; |
08 |
} |
09 |
#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标签的前面插入一对空标签的办法。
01 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
02 |
<head> |
03 |
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> |
04 |
<title>方法2 - 未知高度的图片垂直居中 - www.springload.cn</title> |
05 |
06 |
<style type="text/css"> |
07 |
body { |
08 |
height:100%; |
09 |
} |
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表达式来实现兼容。
01 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
02 |
<head> |
03 |
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> |
04 |
<title>方法3 - 未知高度的图片垂直居中 - www.springload.cn</title> |
05 |
06 |
<style type="text/css"> |
07 |
body { |
08 |
height:100%; |
09 |
} |
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:[removed](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> |
