CSS文字和div竖直垂直居中方式总结

日期：2021-03-03 类型：科技新闻 

关键词：秀米制作h5，h5如何制作，h5小游戏制作，h5游戏开发，免费的h5制作网站

在款式合理布局中，大家常常碰到必须将元素垂直居中。根据css完成元素的水平垂直居中较为简易：对文字，只必须对其父级元素设定text-align: center;，而对div等块级元素，只必须设定其left和right的margin值为auto。要完成元素的竖直垂直居中，有人会想起css中的vertical-align特性，可是它只对有着valign特点的元素才起效，比如报表元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是沒有valign特点的，因而应用vertical-align对它们不起功效。因而大家必须根据其他方式去完成元素的竖直垂直居中，下面我总结了几种了常见竖直垂直居中方式。

单写作本竖直垂直居中

针对单写作本，大家只必须将文字行高(line-height)和所属地区高宽比(height)设为1致便可：

XML/HTML Code拷贝內容到剪贴板
  1. <!--html编码-->  
  2.     <div id="div1">  
  3.         这是单写作本竖直垂直居中   
  4.     </div>  
  5.   
  6. /*css编码*/   
  7.         #div1{   
  8.             width: 300px;   
  9.             height: 100px;   
  10.             margin: 50px auto;   
  11.             border: 1px solid red;   
  12.             line-height: 100px; /*设定line-height与父级元素的height相同*/   
  13.             text-align: center; /*设定文字水平垂直居中*/   
  14.             overflow: hidden; /*避免內容超过器皿或造成全自动换行*/   
  15.         }   

多写作本竖直垂直居中

多写作本竖直垂直居中分成两种状况，1个是父级元素高宽比不固定不动，伴随着內容转变；另外一个是父级元素高宽比固定不动。

父级元素高宽比不固定不动

父级高宽比不固定不动的时，高宽比只能根据內部文字来撑开。这样，大家能够根据设定内填充（padding）的值来使文字看起来竖直垂直居中，只需设定padding-top和padding-bottom的值相同：

XML/HTML Code拷贝內容到剪贴板
  1. <!--html编码-->  
  2.     <div id="div1">  
  3.             这是多写作本竖直垂直居中，   
  4.             这是多写作本竖直垂直居中，   
  5.             这是多写作本竖直垂直居中，   
  6.             这是多写作本竖直垂直居中。   
  7.     </div>  
  8.   
  9. /*css编码*/   
  10.         #div1{   
  11.             width: 300px;   
  12.             margin: 50px auto;   
  13.             border: 1px solid red;   
  14.             text-align: center; /*设定文字水平垂直居中*/   
  15.             padding: 50px 20px;   
  16.         }   
  17.   

父级元素高宽比固定不动

本文1刚开始就提到css中的vertical-align特性，可是它只对有着valign特点的元素才起效，融合display: table;，可使得div仿真模拟table特性。因而大家能够设定父级div的display特性：display: table;；随后再加上1个div包括文字內容，设定其display:table-cell;和vertical-align:middle;。实际编码以下：

XML/HTML Code拷贝內容到剪贴板
  1. <!--html编码-->  
  2.     <div id="outer">  
  3.         <div id="middle">  
  4.             这是固定不动高宽比多写作本竖直垂直居中，   
  5.             这是固定不动高宽比多写作本竖直垂直居中，   
  6.             这是固定不动高宽比多写作本竖直垂直居中，   
  7.             这是固定不动高宽比多写作本竖直垂直居中。   
  8.         </div>  
  9.     </div>  
  10.   
  11. /*css编码*/   
  12.         #outer{   
  13.             width: 400px;   
  14.             height: 200px;   
  15.             margin: 50px auto;   
  16.             border: 1px solid red;   
  17.             display: table;   
  18.         }   
  19.         #middle{    
  20.             display:table-cell;    
  21.             vertical-align:middle;     
  22.             text-align: center; /*设定文字水平垂直居中*/     
  23.             width:100%;      
  24.         }   
  25.   

可是，在IE7中显示信息实际效果以下：

这是由于IE7及下列的版本号其实不能很好的适用display:table和display:table-cell特性，自然，假如你不考虑到IE7下列的版本号的访问器，上述方式是能够完成竖直垂直居中。假如把IE7及下列版本号考虑到进去，大家能够根据用到CSS hack的专业知识来设定对于不一样访问器的特性。

XML/HTML Code拷贝內容到剪贴板
  1. <!--html编码-->  
  2.     <div id="outer">  
  3.         <div id="middle">  
  4.             <div id="content">  
  5.                 这是固定不动高宽比多写作本竖直垂直居中(适配IE7)，   
  6.                 这是固定不动高宽比多写作本竖直垂直居中(适配IE7)，   
  7.                 这是固定不动高宽比多写作本竖直垂直居中(适配IE7)，   
  8.                 这是固定不动高宽比多写作本竖直垂直居中(适配IE7)。   
  9.             </div>  
  10.         </div>  
  11.     </div>  
  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:⑸0%;     
  33.         }   
  34.   

子div竖直垂直居中

1、依据子div实际尺寸设定偏位

假如子div固定不动尺寸，设置水平静竖直偏位父元素的50%，再依据具体长度将子元素向上和向左挪回1半尺寸

XML/HTML Code拷贝內容到剪贴板
  1. <!--html编码-->  
  2.     <div id="outer">  
  3.         <div id="middle">  
  4.             子div(固定不动尺寸)竖直垂直居中   
  5.         </div>             
  6.     </div>  
  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: ⑸0px;   
  24.                 margin-top: ⑸0px;   
  25.         }   
  26.   

该方式适配IE7、IE6，可是只对于子div尺寸的固定不动的状况下才合理。绝大多数情况下，子div的尺寸是不固定不动的，下面详细介绍子div尺寸不固定不动时的方式。因为显示信息实际效果与这个实际效果基础1样，实际效果图就不11贴出来，读者能够自主拷贝编码认证。

2、运用translate

对于第1种方式中水平静竖直偏位父元素的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(⑸0%) translateY(⑸0%);   
  10.         -webkit-transform: translateX(⑸0%) translateY(⑸0%);   
  11.     }   
  12.   

这类方式必须留意transform是css3中的特性，应用时留意访问器的适配性，IE9以前的版本号不适用。

3、运用肯定合理布局absolute

XML/HTML Code拷贝內容到剪贴板
  1. <!--html编码-->  
  2.     <div id="outer">  
  3.         <div id="middle">  
  4.             运用肯定精准定位完成子div尺寸不固定不动竖直垂直居中   
  5.         </div>             
  6.     </div>  
  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. <!--html编码-->  
  2.     <div id="outer">  
  3.         <div id="middle">  
  4.             运用vertical-align特性完成子div尺寸不固定不动竖直垂直居中   
  5.         </div>             
  6.     </div>  
  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;再设定其子元素竖直垂直居中，这类方式和上面设定父级元素高宽比固定不动时多写作本垂直居中的方式1样，因此这类方式也不可以适配IE7、IE6。假如必须适配IE7、IE6，能够参考上面的编码，上面设定父级元素高宽比固定不动时多写作本垂直居中的方式实际上便是将最里边的div竖直垂直居中。这里我就不重述了。

5、运用display: flex

XML/HTML Code拷贝內容到剪贴板
  1. <!--html编码-->  
  2.     <div id="outer">  
  3.         <div id="middle">  
  4.             运用display: flex完成子div尺寸不固定不动竖直垂直居中   
  5.         </div>             
  6.     </div>  
  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中再加这3句话就行，可是在IE中适配性不太好，IE9及下列IE访问器版本号都不适用。

以上是我总结的1些常见到的竖直垂直居中的设计方案方式，大伙儿能够依据自身的必须挑选适合的设计方案方法。

原文连接：http://blog.csdn.net/u014607184/article/details/51820508

上一篇：详解CSS3中nth 返回下一篇：没有了