CSS让div垂直居中的多种方法分享

一、单行垂直居中

如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。

如：

CSS Code复制内容到剪贴板

1. div {      

2.         height:25px;      

3.         line-height:25px;      

4.         overflow:hidden;      

5.  }      

6.   

这段代码很简，后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。

XML/HTML Code复制内容到剪贴板

1.   

2.   

3.    

4.     

5.     

6.     

7.  body { font-size:12px;font-family:tahoma;}   

8.  div {   

9.   height:25px;   

10.   line-height:25px;   

11.   border:1px solid #FF0099;   

12.   background-color:#FFCCFF;   

13.  }   

14.     

15.    

16.    

17.   

    现在我们要使这段文字垂直居中显示！
      

18.    

19.   

20.   

二、多行未知高度文字的垂直居中

如果一段内容，它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法，就是设定Padding，使上下的padding值相同即可。同样的，这也是一种“看起来”的垂直居中方式，它只不过是使文字把

三、多行文本固定高度的居中

在本文的一开始，我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display属性能够模拟

这个方法应该是很理想了，但是不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell，因此这种方法在Internet Explorer 6及以下的版本中是无效的。嗯，这让人很郁闷！不过我们还其它的办法

四、在Internet Explorer中的解决方案

在Internet Explorer 6及以下版本中，在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后，如果再对子元素进行百分比计算时，计算的基础似乎是有继承性的（如果定位的数值是绝对数值没有这个问题，但是使用百分比计算的基础将不再是该元素的高度，而从父元素继承来的定位高度）。例如，我们有下面这样一个(X)HTML代码段：

CSS Code复制内容到剪贴板

如果我们对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.   

2.   

3.    

4.     

5.     

6.     

7.  body { font-size:12px;font-family:tahoma;}   

8.  div#wrap {   

9.   border:1px solid #FF0099;   

10.   background-color:#FFCCFF;   

11.   width:760px;   

12.   height:400px;   

13.   position:relative;   

14.  }   

15.  div#subwrap {   

16.   position:absolute;   

17.   top:50%;   

18.  }   

19.  div#content {   

20.   position:relative;   

21.   top:-50%;   

22.  }   

23.     

24.    

25.      

26.    

27.     

28.    

    现在我们要使这段文字垂直居中显示！   
    

29.  div#wrap {   

30.   border:1px solid #FF0099;   

31.   background-color:#FFCCFF;   

32.   width:760px;   

33.   height:500px;   

34.   position:relative;   

35.  }   

36.  div#subwrap {   

37.   position:absolute;   

38.   border:1px solid #000;   

39.   top:50%;   

40.  }   

41.  div#content {   

42.   border:1px solid #000;   

43.   position:relative;   

44.   top:-50%;   

45.  }  

46.     

47.    

48.   

49.    

50.   

51.   

五、完美的解决方案

那么我们综合上面两种方法就可以得到一个完美的解决方案，不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器，你可

以参考这篇“简单CSS hack：区分IE6、IE7、IE8、Firefox、Opera”：

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.   

至此，一个完美的居中方案就产生了。

XML/HTML Code复制内容到剪贴板

1.   

2.   

3.    

4.     

5.     

6.     

7.  body { font-size:12px;font-family:tahoma;}   

8.  div#wrap {   

9.   display:table;   

10.   border:1px solid #FF0099;   

11.   background-color:#FFCCFF;   

12.   width:760px;   

13.   height:400px;   

14.   _position:relative;   

15.   overflow:hidden;   

16.  }   

17.  div#subwrap {   

18.   vertical-align:middle;   

19.   display:table-cell;   

20.   _position:absolute;   

21.   _top:50%;   

22.  }   

23.  div#content {    

24.   _position:relative;   

25.   _top:-50%;   

26.  }   

27.     

28.    

29.    

30.    

31.     

32.    

    现在我们要使这段文字垂直居中显示！   
    

33.  div#wrap {   

34.   border:1px solid #FF0099;   

35.   background-color:#FFCCFF;   

36.   width:760px;   

37.   height:500px;   

38.   position:relative;   

39.  }   

40.  div#subwrap {   

41.   position:absolute;   

42.   border:1px solid #000;   

43.   top:50%;   

44.  }   

45.  div#content {   

46.   border:1px solid #000;   

47.   position:relative;   

48.   top:-50%;   

49.  }  

50.     

51.    

52.   

53.    

54.   

55.   

到此，相信大家对“CSS让div垂直居中的多种方法分享”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

分享至：

   

关于我们

公司简介 发展历程

服务项目

高端网站建设 小程序开发 APP开发 网络营销

建站知识

网站建设 网站设计 网站制作 小程序

联系我们

公司地址 人才招聘

成都 重庆



电话：028-86922220



地址：成都市太升南路288号锦天国际A幢1002号



电话：028-86922220



地址：重庆市南岸区弹子石腾龙大道58号2栋21-6

版权所有：成都创新互联科技有限公司重庆分公司 渝ICP备2021005571号-4