CSS设置DIV垂直居中的N种⽅法兼容IE浏览器
在说到这个问题的时候，也许有⼈会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不⽀持我只需做少许的CSS Hack技术就可以啊！所以在这⾥我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才⽣效，例如表格元素中的<td>、<th>、<caption>等，⽽像<div>、<span>这样的元素是没有valign特性的，因此使⽤vertical-align对它们不起作⽤。
Tips: 完美解决⽅案在⽂末！
⼀、单⾏垂直居中
如果⼀个容器中只有⼀⾏⽂字，对它实现居中相对⽐较简单，我们只需要设置它的实际⾼度height和所在⾏的⾼度line-height 相等即可。
如：
XML/HTML Code复制内容到剪贴板
1. div {
2. height:25px;
3. line-height:25px;
4. overflow:hidden;
5. }
6.
这段代码很简，后⾯使⽤overflow:hidden的设置是为了防⽌内容超出容器或者产⽣⾃动换⾏，这样就达不到垂直居中效果了。
XML/HTML Code复制内容到剪贴板
1. <html>
2. <head>
3. <title> 单⾏⽂字实现垂直居中 </title>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <style type="text/css">
6. body { font-size:12px;font-family:tahoma;}
7. div {
8. height:25px;
9. line-height:25px;
10. border:1px solid #FF0099;
11. background-color:#FFCCFF;
12. }
13.
14. </style>
15. </head>
16. <body>
17.
18. <div>现在我们要使这段⽂字垂直居中显⽰！</div>
19. </body>
20.
21. </html>
⼆、多⾏未知⾼度⽂字的垂直居中
如果⼀段内容，它的⾼度是可变的那么我们就可以使⽤上⼀节讲到的实现⽔平居中时使⽤到的最后⼀种⽅法，就是设定Padding，使上下的padding值相同即可。同样的，这也是⼀种“看起来”的垂直居中⽅式，它只不过是使⽂字把<div>完全填充的⼀种访求⽽已。可以使⽤类似下⾯的代码：
CSS Code复制内容到剪贴板
1. div {
2.
3. padding:25px;
4.
5. }
6.
这种⽅法的优点就是它可以在任何浏览器上运⾏，并且代码很简单，只不过这种⽅法应⽤的前提就是容器的⾼度必须是可伸缩的。
XML/HTML Code复制内容到剪贴板
1. <html>
2. <head>
3. <title> 多⾏⽂字实现垂直居中 </title>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5.
6. <style type="text/css">
7.
8. body { font-size:12px;font-family:tahoma;}
9. div {
10. padding:25px;
11. border:1px solid #FF0099;
12. background-color:#FFCCFF;
13. width:760px;
14.
15. }
16. </style>
17. </head>
18. <body>
19. <div><br> <pre>现在我们要使这段⽂字垂直居中显⽰！
20. </pre><br> </div>
21.
22. </body>
23.
24. </html>
25.
三、多⾏⽂本固定⾼度的居中
在本⽂的⼀开始，我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作⽤，但是在CSS中还有⼀个display属性能够模拟<table>，所以我们可以使⽤这个属性来让<div>模拟<table>就可以使⽤vertical-align了。注
意，display:table和display:table-cell的使⽤⽅法，前者必须设置在⽗元素上，后者必须设置在⼦元素上，因此我们要为需要定位的⽂本再增加⼀个<div>元素：
CSS Code复制内容到剪贴板
1. div#wrap {
2. height:400px;
3. display:table;
4. }
5. div#content {
6. vertical-align:middle;
7. display:table-cell;
8. border:1px solid #FF0099;
9. background-color:#FFCCFF;
10. width:760px;
11. }
12.
XML/HTML Code复制内容到剪贴板
1. <html>
2. <head>
3. <title> 多⾏⽂字实现垂直居中 </title>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <style type="text/css">
6. body { font-size:12px;font-family:tahoma;}
7. div#wrap {
8. height:400px;
9. display:table;
10. }
11. div#content {
12. vertical-align:middle;
13. display:table-cell;
14. border:1px solid #FF0099;
15. background-color:#FFCCFF;
16. width:760px;
17. }
18. </style>
19. </head>
20.
21. <body>
22. <div id="wrap">
23. <div id="content"><br>
24. <pre><br>现在我们要使这段⽂字垂直居中显⽰！
25. div#wrap {
26. height:400px;
27. display:table;
28. }
29. div#content {
30. vertical-align:middle;
31. display:table-cell;
32. border:1px solid #FF0099;
33. background-color:#FFCCFF;
34. width:760px;
35. }
36.
37. </pre><br> </div>
38.
39. </div>
40.
41. </body>
42.
43. </html>
44.
这个⽅法应该是很理想了，但是不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell，因此这种⽅法在Internet Explorer 6及以下的版本中是⽆效的。嗯，这让⼈很郁闷！不过我们还其它的办法。
四、在Internet Explorer中的解决⽅案
在Internet Explorer 6及以下版本中，在⾼度的计算上存在着缺陷的。在Internet Explorer 6中对⽗元素
进⾏定位后，如果再对⼦元素进⾏百分⽐计算时，计算的基础似乎是有继承性的（如果定位的数值是绝对数值没有这个问题，但是使⽤百分⽐计算的基础将不再是该元素的⾼度，⽽从⽗元素继承来的定位⾼度）。
例如，我们有下⾯这样⼀个(X)HTML代码段：
CSS Code复制内容到剪贴板
1. <div id="wrap">
2. <div id="subwrap">
3. <div id="content">
4. </div>
5. </div>
6.
7. </div>
8.
如果我们对subwrap进⾏了绝对定位，那么content也会继承了这个这个属性，虽然它不会在页⾯中马上显⽰出来，但是如果再对content进⾏相对定位的时候，你使⽤的100%分⽐将不再是content原有的⾼度。例如，我们设定了subwrap的position为40%，我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%；那么，如果我们设定subwrap的top:50%的话，我
们必须使⽤100%才能使content回到原来的位置上去，但是如果我们把content也设置50%呢？那么它就正好垂直居中了。所以我们可以使⽤这中⽅法来实现Internet Explorer 6中的垂直居中：
CSS Code复制内容到剪贴板
1. div#wrap {
2. border:1px solid #FF0099;
3. background-color:#FFCCFF;
4. width:760px;
5. height:400px;
6. position:relative;
7. }
8. div#subwrap {
9. position:absolute;
10. border:1px solid #000;
11. top:50%;
12. }
13. div#content {
14. border:1px solid #000;
15. position:relative;
16. top:-50%;
17. }
18.
当然，这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作⽤。（不过我不解，我查阅了很多⽂章，不知道是因为出处相同还是什么原因，似乎很多⼈都不愿意去解释Internet Exlporer 6中这这个Bug的原理，我也只是了解了⼀点⽪⽑，还要再研究）
XML/HTML Code复制内容到剪贴板
1. <html>
2. <head>
3. <title> 多⾏⽂字实现垂直居中 </title>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <style type="text/css">
6. body { font-size:12px;font-family:tahoma;}
7. div#wrap {
8. border:1px solid #FF0099;
9. background-color:#FFCCFF;
10. width:760px;
11. height:400px;
12. position:relative;
13. }
14. div#subwrap {
15. position:absolute;
16. top:50%;
17. }
18. div#content {
19. position:relative;
20. top:-50%;
21. }
22. </style>
23. </head>
24. <body>
25. <div id="wrap">
26. <div id="subwrap">
27. <div id="content"><pre>现在我们要使这段⽂字垂直居中显⽰！
28. div#wrap {
29. border:1px solid #FF0099;
30. background-color:#FFCCFF;
31. width:760px;
32. height:500px;
33. position:relative;
34.
35. }
36. div#subwrap {
37. position:absolute;
38. border:1px solid #000;
39. top:50%;
40. }
41. div#content {
42.
43. border:1px solid #000;
44.
45. position:relative;
46.
47. top:-50%;
48. }<br> </pre>
49. </div>
50. </div>
51. </div>
52. </body>
53. </html>
54.
五、完美的解决⽅案
那么我们综合上⾯两种⽅法就可以得到⼀个完美的解决⽅案，不过这要⽤到CSS hack的知识。CSS Code复制内容到剪贴板
1. div#wrap {
2. display:table;
3. border:1px solid #FF0099;
4. background-color:#FFCCFF;
5. width:760px;
6. height:400px;
7. _position:relative;
8. overflow:hidden;
9. }
10. div#subwrap {
11. vertical-align:middle;
12. display:table-cell;
13. _position:absolute;
14. _top:50%;
15. }
16. div#content {
17. _position:relative;
18. _top:-50%;
19.
20. }
21.
⾄此，⼀个完美的居中⽅案就产⽣了。
XML/HTML Code复制内容到剪贴板
1. <html>
2. <head>
3. <title> 多⾏⽂字实现垂直居中 </title>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <style type="text/css">
6. body { font-size:12px;font-family:tahoma;}
div border属性7. div#wrap {
8. display:table;
9. border:1px solid #FF0099;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论