温江做网站

• 首页
• 关于我们
• 服务项目
  

  高端网站定制

  

  微信定制

  

  APP开发服务

  

  网络营销服务

  

  电商网站建设

  

  生物医药网站建设

  

  外贸网站建设

  

  教育培训网站建设
• 小程序开发
• 案例展示
  

  网站建设

  

  小程序

  

  电商平台

  

  APP

  

  系统平台
• 建站知识
• 联系我们

咨询热线 ：

028-86922220

但是，在IE7中显示效果如下：

这是因为IE7及以下的版本并不能很好的支持display:table和display:table-cell属性，当然，如果你不考虑IE7以下的版本的浏览器，上述方法是可以实现垂直居中。如果把IE7及以下版本考虑进去，我们可以通过用到CSS hack的知识来设置针对不同浏览器的属性。

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

1.   

2.       

3.           

4.               

5.                 这是固定高度多行文本垂直居中(兼容IE7)，   

6.                 这是固定高度多行文本垂直居中(兼容IE7)，   

7.                 这是固定高度多行文本垂直居中(兼容IE7)，   

8.                 这是固定高度多行文本垂直居中(兼容IE7)。   

9.               

10.           

11.       

12.   

13. /*css代码*/   

14.         #outer{   

15.             width: 400px;   

16.             height: 200px;   

17.             margin: 50px auto;   

18.             border: 1px solid red;   

19.             display: table;   

20.             *position:relative;  //兼容IE7及以下版本   

21.         }   

22.         #middle{    

23.             display:table-cell;    

24.             vertical-align:middle;     

25.             text-align: center; /*设置文本水平居中*/     

26.             width:100%;   

27.             *position:absolute;   //兼容IE7及以下版本   

28.             *top:50%;     

29.         }   

30.         #content {     

31.            *position:relative;  //兼容IE7及以下版本    

32.            *top:-50%;     

33.         }   

34.   

子div垂直居中

1、根据子div具体大小设置偏移

如果子div固定大小，设定水平和垂直偏移父元素的50%，再根据实际长度将子元素向上和向左挪回一半大小

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

1.   

2.       

3.           

4.             子div(固定大小)垂直居中   

5.                      

6.       

7.   

8. /*css代码*/   

9.         #outer{   

10.                 background-color: #13CDF4;   

11.                 width: 300px;   

12.                 height: 200px;   

13.                 position: relative;   

14.         }   

15.         #middle{    

16.                 background-color: #E41627;   

17.                 width: 100px;   

18.                 height: 100px;   

19.                 margin: auto;   

20.                 position: absolute;   

21.                 left: 50%;    

22.                 top: 50%;   

23.                 margin-left: -50px;   

24.                 margin-top: -50px;   

25.         }   

26.   

该方法兼容IE7、IE6，但是只针对子div大小的固定的情况下才有效。大部分时候，子div的大小是不固定的，下面介绍子div大小不固定时的方法。由于显示效果与这个效果基本一样，效果图就不一一贴出来，读者可以自行验证。

2、利用translate

针对第一种方法中水平和垂直偏移父元素的50%后，不设置margin值，而是利用除css3中的transform属性设置translate的值，css代码部分改成如下：

CSS Code复制内容到剪贴板

1. #middle{    

2.         background-color: #E41627;   

3.         width: 100px;   

4.         height: 100px;   

5.         margin: auto;   

6.         position: absolute;   

7.         left: 50%;    

8.         top: 50%;   

9.         transform: translateX(-50%) translateY(-50%);   

10.         -webkit-transform: translateX(-50%) translateY(-50%);   

11.     }   

12.   

这种方法需要注意transform是css3中的属性，使用时注意浏览器的兼容性，IE9之前的版本不支持。

3、利用绝对布局absolute

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

1.   

2.       

3.           

4.             利用绝对定位实现子div大小不固定垂直居中   

5.                      

6.       

7.   

8. /*css代码*/   

9.         #outer{   

10.             background-color: #13CDF4;   

11.             width: 300px;   

12.             height: 200px;   

13.             position: relative;   

14.         }   

15.         #middle{    

16.             background-color: #E41627;   

17.             width: 100px;   //子div大小可随意设置   

18.             height: 100px;   

19.             margin: auto;   

20.             position: absolute;   

21.             top: 0;left: 0;right: 0;bottom: 0;   

22.         }   

23.   

该方法不兼容IE7、IE6

4、利用vertical-align

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

1.   

2.       

3.           

4.             利用vertical-align属性实现子div大小不固定垂直居中   

5.                      

6.       

7.   

8. /*css代码*/   

9.         #outer{   

10.             background-color: #13CDF4;   

11.             width: 300px;   

12.             height: 200px;   

13.             display: table-cell;    

14.             vertical-align: middle;   

15.         }   

16.         #middle{    

17.             background-color: #E41627;   

18.             width: 100px;   

19.             height: 100px;   

20.             margin: 0 auto;   

21.         }   

22.   

这种方法是将div转变成table-cell显示，然后通过vertical-align: middle;再设置其子元素垂直居中，这种方法和上面设置父级元素高度固定时多行文本居中的方法一样，所以这种方法也不能兼容IE7、IE6。如果需要兼容IE7、IE6，可以参照上面的代码，上面设置父级元素高度固定时多行文本居中的方法其实就是将最里面的div垂直居中。这里我就不重述了。

5、利用display: flex

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

1.   

2.       

3.           

4.             利用display: flex实现子div大小不固定垂直居中   

5.                      

6.       

7.   

8. /*css代码*/   

9.         #outer{   

10.             background-color: #13CDF4;   

11.             width: 300px;   

12.             height: 200px;   

13.             display: flex;   

14.             justify-content: center;/*实现水平居中*/   

15.             align-items:center; /*实现垂直居中*/   

16.         }   

17.         #middle{    

18.             background-color: #E41627;   

19.             width: 100px;   

20.             height: 100px;   

21.         }   

22.   

这种方法只需要在父级div中加上这三句话就行，但是在IE中兼容性不好，IE9及以下IE浏览器版本都不支持。

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

分享至：

   

关于我们

公司简介 发展历程

服务项目

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

建站知识

行业新闻 建站学堂 常见问题

联系我们

公司地址 人才招聘

成都



电话：028-86922220



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

版权所有：成都新网创想广告设计中心（普通合伙） 蜀ICP备11025516号-13