這篇文章主要講解了“利用display:table-cell實(shí)現(xiàn)div垂直居中”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“利用display:table-cell實(shí)現(xiàn)div垂直居中”吧！

成都創(chuàng)新互聯(lián)專業(yè)成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設(shè)公司，集網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、網(wǎng)站制作于一體，網(wǎng)站seo、網(wǎng)站優(yōu)化、網(wǎng)站營銷、軟文推廣等專業(yè)人才根據(jù)搜索規(guī)律編程設(shè)計(jì)，讓網(wǎng)站在運(yùn)行后，在搜索中有好的表現(xiàn)，專業(yè)設(shè)計(jì)制作為您帶來效益的網(wǎng)站！讓網(wǎng)站建設(shè)為您創(chuàng)造效益。

ie7和ie6都不能識別 display: table-cell;（但是支持display: block等css1的屬性?。?br/>ie8以及以后版本可以識別！

ie7和ie6能識別vertical-align:middle;

如果盒模型中間只有幾段文字的話，設(shè)置line-height就可以實(shí)現(xiàn)居中顯示了！

如果要實(shí)現(xiàn)盒模型中的div居中，可以參考以下代碼： 

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

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.   

11. div#subwrap {    

12. vertical-align: middle;    

13. display: table-cell;    

14. *position: absolute;    

15. *top: 50%;    

16. }    

17.   

18. div#content {    

19. *position: relative;    

20. *top: -50%;    

21. }  

效果：
 

感謝各位的閱讀，以上就是“利用display:table-cell實(shí)現(xiàn)div垂直居中”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對利用display:table-cell實(shí)現(xiàn)div垂直居中這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！