资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

CSS怎么让文本和div垂直居中

本篇内容主要讲解“CSS怎么让文本和div垂直居中”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS怎么让文本和div垂直居中”吧!

站在用户的角度思考问题，与客户深入沟通，找到沈北新网站设计与沈北新网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都做网站、网站建设、企业官网、英文网站、手机端网站、网站推广、域名申请、网站空间、企业邮箱。业务覆盖沈北新地区。

单行文本垂直居中

对于单行文本，我们只需要将文本行高(line-height)和所在区域高度(height)设为一致即可：

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

  1.   

  2.       

  3.         这是单行文本垂直居中   

  4.     

  

  •   

  • /*css代码*/   

  •         #div1{   

  •             width: 300px;   

  •             height: 100px;   

  •             margin: 50px auto;   

  •             border: 1px solid red;   

  •             line-height: 100px; /*设置line-height与父级元素的height相等*/   

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

  •             overflow: hidden; /*防止内容超出容器或者产生自动换行*/   

  •         }   

    • CSS怎么让文本和div垂直居中

    多行文本垂直居中

    多行文本垂直居中分为两种情况，一个是父级元素高度不固定，随着内容变化；另一个是父级元素高度固定。

    父级元素高度不固定

    父级高度不固定的时，高度只能通过内部文本来撑开。这样，我们可以通过设置内填充（padding）的值来使文本看起来垂直居中，只需设置padding-top和padding-bottom的值相等：

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

    1.   

    2.       

    3.             这是多行文本垂直居中，   

    4.             这是多行文本垂直居中，   

    5.             这是多行文本垂直居中，   

    6.             这是多行文本垂直居中。   

    7.     

      

  •   

  • /*css代码*/   

  •         #div1{   

  •             width: 300px;   

  •             margin: 50px auto;   

  •             border: 1px solid red;   

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

  •             padding: 50px 20px;   

  •         }   

  •   

    • CSS怎么让文本和div垂直居中

    父级元素高度固定

    本文一开始就提到css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，结合display: table;，可以使得div模拟table属性。因此我们可以设置父级div的display属性：display: table;；然后再添加一个div包含文本内容，设置其display:table-cell;和vertical-align:middle;。具体代码如下：

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

    1.   

    2.       

    3.           

    4.             这是固定高度多行文本垂直居中，   

    5.             这是固定高度多行文本垂直居中，   

    6.             这是固定高度多行文本垂直居中，   

    7.             这是固定高度多行文本垂直居中。   

    8.         

      

  •       

  •   

  • /*css代码*/   

  •         #outer{   

  •             width: 400px;   

  •             height: 200px;   

  •             margin: 50px auto;   

  •             border: 1px solid red;   

  •             display: table;   

  •         }   

  •         #middle{    

  •             display:table-cell;    

  •             vertical-align:middle;     

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

  •             width:100%;      

  •         }   

  •   

    • CSS怎么让文本和div垂直居中

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

    CSS怎么让文本和div垂直居中

    这是因为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.   

    CSS怎么让文本和div垂直居中

    该方法兼容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垂直居中”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！


    本文名称：CSS怎么让文本和div垂直居中
    网页路径：http://cdkjz.cn/article/igoooj.html
    返回首页 了解更多建站资讯

    相关资讯

    多年建站经验

    多一份参考，总有益处

    联系快上网，免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈，可以通过以下方式与我们联系

    大客户专线   成都：13518219792   座机：028-86922220

    在线咨询 提交需求
    友情链接 交换友情链接
    盐亭做网站网站排名盐亭网站设计绵阳服务器托管中建建业环保网站方案帝美豪门窗网站排名中国电信成都枢纽中心网络营销推广

    成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

    成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

    专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图