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

本篇內(nèi)容主要講解“CSS怎么讓文本和div垂直居中”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“CSS怎么讓文本和div垂直居中”吧!

單行文本垂直居中

對(duì)于單行文本，我們只需要將文本行高(line-height)和所在區(qū)域高度(height)設(shè)為一致即可：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

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; /*設(shè)置line-height與父級(jí)元素的height相等*/   

13.             text-align: center; /*設(shè)置文本水平居中*/   

14.             overflow: hidden; /*防止內(nèi)容超出容器或者產(chǎn)生自動(dòng)換行*/   

15.         }   

多行文本垂直居中

多行文本垂直居中分為兩種情況，一個(gè)是父級(jí)元素高度不固定，隨著內(nèi)容變化；另一個(gè)是父級(jí)元素高度固定。

父級(jí)元素高度不固定

父級(jí)高度不固定的時(shí)，高度只能通過(guò)內(nèi)部文本來(lái)?yè)伍_。這樣，我們可以通過(guò)設(shè)置內(nèi)填充（padding）的值來(lái)使文本看起來(lái)垂直居中，只需設(shè)置padding-top和padding-bottom的值相等：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

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; /*設(shè)置文本水平居中*/   

15.             padding: 50px 20px;   

16.         }   

17.   

父級(jí)元素高度固定

本文一開始就提到css中的vertical-align屬性，但是它只對(duì)擁有valign特性的元素才生效，結(jié)合display: table;，可以使得div模擬table屬性。因此我們可以設(shè)置父級(jí)div的display屬性：display: table;；然后再添加一個(gè)div包含文本內(nèi)容，設(shè)置其display:table-cell;和vertical-align:middle;。具體代碼如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

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; /*設(shè)置文本水平居中*/     

23.             width:100%;      

24.         }   

25.   

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

這是因?yàn)镮E7及以下的版本并不能很好的支持display:table和display:table-cell屬性，當(dāng)然，如果你不考慮IE7以下的版本的瀏覽器，上述方法是可以實(shí)現(xiàn)垂直居中。如果把IE7及以下版本考慮進(jìn)去，我們可以通過(guò)用到CSS hack的知識(shí)來(lái)設(shè)置針對(duì)不同瀏覽器的屬性。

XML/HTML Code復(fù)制內(nèi)容到剪貼板

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; /*設(shè)置文本水平居中*/     

26.             width:100%;   

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

28.             *top:50%;     

29.         }   

30.         #content {     

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

32.            *top:-50%;     

33.         }   

34.   

子div垂直居中

1、根據(jù)子div具體大小設(shè)置偏移

如果子div固定大小，設(shè)定水平和垂直偏移父元素的50%，再根據(jù)實(shí)際長(zhǎng)度將子元素向上和向左挪回一半大小

XML/HTML Code復(fù)制內(nèi)容到剪貼板

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: -50px;   

24.                 margin-top: -50px;   

25.         }   

26.   

該方法兼容IE7、IE6，但是只針對(duì)子div大小的固定的情況下才有效。大部分時(shí)候，子div的大小是不固定的，下面介紹子div大小不固定時(shí)的方法。由于顯示效果與這個(gè)效果基本一樣，效果圖就不一一貼出來(lái)，讀者可以自行驗(yàn)證。

2、利用translate

針對(duì)第一種方法中水平和垂直偏移父元素的50%后，不設(shè)置margin值，而是利用除css3中的transform屬性設(shè)置translate的值，css代碼部分改成如下：

CSS Code復(fù)制內(nèi)容到剪貼板

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中的屬性，使用時(shí)注意瀏覽器的兼容性，IE9之前的版本不支持。

3、利用絕對(duì)布局absolute

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. <!--html代碼-->  

2.     <div id="outer">  

3.         <div id="middle">  

4.             利用絕對(duì)定位實(shí)現(xiàn)子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大小可隨意設(shè)置   

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復(fù)制內(nèi)容到剪貼板

1. <!--html代碼-->  

2.     <div id="outer">  

3.         <div id="middle">  

4.             利用vertical-align屬性實(shí)現(xiàn)子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轉(zhuǎn)變成table-cell顯示，然后通過(guò)vertical-align: middle;再設(shè)置其子元素垂直居中，這種方法和上面設(shè)置父級(jí)元素高度固定時(shí)多行文本居中的方法一樣，所以這種方法也不能兼容IE7、IE6。如果需要兼容IE7、IE6，可以參照上面的代碼，上面設(shè)置父級(jí)元素高度固定時(shí)多行文本居中的方法其實(shí)就是將最里面的div垂直居中。這里我就不重述了。

5、利用display: flex

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. <!--html代碼-->  

2.     <div id="outer">  

3.         <div id="middle">  

4.             利用display: flex實(shí)現(xiàn)子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;/*實(shí)現(xiàn)水平居中*/   

15.             align-items:center; /*實(shí)現(xiàn)垂直居中*/   

16.         }   

17.         #middle{    

18.             background-color: #E41627;   

19.             width: 100px;   

20.             height: 100px;   

21.         }   

22.   

這種方法只需要在父級(jí)div中加上這三句話就行，但是在IE中兼容性不好，IE9及以下IE瀏覽器版本都不支持。

到此，相信大家對(duì)“CSS怎么讓文本和div垂直居中”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！