日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
CSS中實(shí)現(xiàn)DIV容器垂直居中方法揭秘

本文向大家描述一下實(shí)現(xiàn)DIV容器垂直居中的方法，主要有單行垂直居中，多行未知高度文字的垂直居中，多行文本固定高度的居中等內(nèi)容，相信本文介紹一定會(huì)讓你有所收獲。

創(chuàng)新互聯(lián)建站是一家從事企業(yè)網(wǎng)站建設(shè)、網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、行業(yè)門戶網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)制作的專業(yè)的建站公司，擁有經(jīng)驗(yàn)豐富的網(wǎng)站建設(shè)工程師和網(wǎng)頁(yè)設(shè)計(jì)人員，具備各種規(guī)模與類型網(wǎng)站建設(shè)的實(shí)力，在網(wǎng)站建設(shè)領(lǐng)域樹立了自己獨(dú)特的設(shè)計(jì)風(fēng)格。自公司成立以來(lái)曾獨(dú)立設(shè)計(jì)制作的站點(diǎn)近1000家。

DIV CSS教程：實(shí)現(xiàn)DIV容器垂直居中的方法

　　其實(shí)CSS水平居中實(shí)現(xiàn)還是比較簡(jiǎn)單的，反而垂直居中有點(diǎn)麻煩，因?yàn)槲覀冊(cè)O(shè)計(jì)頁(yè)面的時(shí)候往往水平寬度都是固定的。因此我們有必要總結(jié)一下在CSS頁(yè)面布局過(guò)程中實(shí)現(xiàn)垂直居中的方法。

　　在說(shuō)到這個(gè)問(wèn)題的時(shí)候，也許有人會(huì)問(wèn)CSS中不是有vertical-align屬性來(lái)設(shè)置垂直居中的嗎？即使是某些瀏覽器不支持我只需做少許的CSSHack技術(shù)就可以??！所以在這里我還要啰嗦兩句，CSS中的確是有vertical-align屬性，但是它只對(duì)(X)HTML元素中擁有valign特性的元素才生效，例如表格元素中的、、等，而像

、這樣的元素是沒(méi)有valign特性的，因此使用vertical-align對(duì)它們不起作用。

一、單行垂直居中

如果一個(gè)容器中只有一行文字，對(duì)它實(shí)現(xiàn)居中相對(duì)比較簡(jiǎn)單，我們只需要設(shè)置它的實(shí)際高度height和所在行的高度line-height相等即可。如：

ExampleSourceCode

 
 
 
    
  
  
  
  1. DIV{ 
    2. 
  
  
  
  2. height:25px; 
    3. 
  
  
  
  3. line-height:25px; 
    4. 
  
  
  
  4. overflow:hidden; 
    5. 
  
  
  
  5. } 
    6. 
  
  
  
  6.

　　這段代碼很簡(jiǎn)，后面使用overflow:hidden的設(shè)置是為了防止內(nèi)容超出容器或者產(chǎn)生自動(dòng)換行，這樣就達(dá)不到垂直居中效果了。

SourceCodetoRun

 
 
 
    
  
  
  
  1. 
  
  
  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. 
  
  
  
    4. 
  
  
  
  4. 
  
  
  
  5. 52CSS.com
    6. 
  
  
  
    7. 
  
  
  
    8. 
  
  
  
  8.  body{font-size:12px;font-family:tahoma;} 
    9. 
  
  
  
  9.  DIV{ 
    10. 
  
  
  
  10.   height:25px; 
    11. 
  
  
  
  11.   line-height:25px; 
    12. 
  
  
  
  12.   border:1pxsolid#FF0099; 
    13. 
  
  
  
  13.   background-color:#FFCCFF; 
    14. 
  
  
  
  14.  } 
    15. 
  
  
  
  15. 
  
  
  
  16. 
  
  
  
  17. 
  
  
  
  18. 
  
  
  
  19. 現(xiàn)在我們要使這段文字垂直居中顯示！
    20. 
  
  
  
  20. 
  
  
  
  21. 
  
  
  
  22.

 [可先修改部分代碼再運(yùn)行查看效果]

　　不過(guò)在InternetExplorer6及以下版本中，這和方法不支持對(duì)圖片設(shè)置垂直居中。#p#

二、多行未知高度文字的垂直居中

　　如果一段內(nèi)容，它的高度是可變的那么我們就可以使用上一節(jié)講到的實(shí)現(xiàn)水平居中時(shí)使用到的***一種方法，就是設(shè)定Padding，使上下的padding值相同即可。同樣的，這也是一種“看起來(lái)”的垂直居中方式，它只不過(guò)是使文字把

完全填充的一種訪求而已?？梢允褂妙愃葡旅娴拇a：

ExampleSourceCode

 
 
 
    
  
  
  
  1. DIV{ 
    2. 
  
  
  
  2. padding:25px; 
    3. 
  
  
  
  3. } 
    4.

　　這種方法的優(yōu)點(diǎn)就是它可以在任何瀏覽器上運(yùn)行，并且代碼很簡(jiǎn)單，只不過(guò)這種方法應(yīng)用的前提就是容器的高度必須是可伸縮的。

SourceCodetoRun

 
 
 
    
  
  
  
  1. 
  
  
  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. 
  
  
  
    4. 
  
  
  
  4. 
  
  
  
  5. 52CSS.com
    6. 
  
  
  
    7. 
  
  
  
    8. 
  
  
  
  8.  body{font-size:12px;font-family:tahoma;} 
    9. 
  
  
  
  9.  DIV{ 
    10. 
  
  
  
  10.   padding:25px; 
    11. 
  
  
  
  11.   border:1pxsolid#FF0099; 
    12. 
  
  
  
  12.   background-color:#FFCCFF; 
    13. 
  
  
  
  13.   width:760px; 
    14. 
  
  
  
  14.  } 
    15. 
  
  
  
  15. 
  
  
  
  16. 
  
  
  
  17. 
  
  
  
  18. 
  
  
  
  19. 現(xiàn)在我們要使這段文字垂直居中顯示！ 
    20. 
  
  
  
  20.  DIV{ 
    21. 
  
  
  
  21.   padding:25px; 
    22. 
  
  
  
  22.   border:1pxsolid#FF0099; 
    23. 
  
  
  
  23.   background-color:#FFCCFF; 
    24. 
  
  
  
  24.  } 
    25.

  •  [可先修改部分代碼再運(yùn)行查看效果]#p#

    三、多行文本固定高度的居中

    　　在本文的一開始，我們已經(jīng)說(shuō)過(guò)CSS中的vertical-align屬性只會(huì)對(duì)擁有valign特性的(X)HTML標(biāo)簽起作用，但是在CSS中還有一個(gè)display屬性能夠模擬

    ，所以我們可以使用這個(gè)屬性來(lái)讓
    模擬
    就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必須設(shè)置在父元素上，后者必須設(shè)置在子元素上，因此我們要為需要定位的文本再增加一個(gè)
    元素：

    ExampleSourceCode

     
 
 
      
  
  
  
    1. DIV#wrap{ 
      2. 
  
  
  
    2. height:400px; 
      3. 
  
  
  
    3. display:table; 
      4. 
  
  
  
    4. } 
      5. 
  
  
  
    5. DIV#content{ 
      6. 
  
  
  
    6. vertical-align:middle; 
      7. 
  
  
  
    7. display:table-cell; 
      8. 
  
  
  
    8. border:1pxsolid#FF0099; 
      9. 
  
  
  
    9. background-color:#FFCCFF; 
      10. 
  
  
  
    10. width:760px; 
      11. 
  
  
  
    11. } 
      12. 
  
  
  
    12.

     SourceCodetoRun

     
 
 
      
  
  
  
    1. 
  
  
  
    2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      3. 
  
  
  
      4. 
  
  
  
    4. 
  
  
  
    5. 52CSS.com
      6. 
  
  
  
      7. 
  
  
  
      8. 
  
  
  
    8.  body{font-size:12px;font-family:tahoma;} 
      9. 
  
  
  
    9.  DIV#wrap{ 
      10. 
  
  
  
    10.   height:400px; 
      11. 
  
  
  
    11.   display:table; 
      12. 
  
  
  
    12.  } 
      13. 
  
  
  
    13.  DIV#content{ 
      14. 
  
  
  
    14.   vertical-align:middle; 
      15. 
  
  
  
    15.   display:table-cell; 
      16. 
  
  
  
    16.   border:1pxsolid#FF0099; 
      17. 
  
  
  
    17.   background-color:#FFCCFF; 
      18. 
  
  
  
    18.   width:760px; 
      19. 
  
  
  
    19.  } 
      20. 
  
  
  
    20. 
  
  
  
    21. 
  
  
  
    22. 
  
  
  
    23. 
  
  
  
      25. 
  
  
  
    25. 現(xiàn)在我們要使這段文字垂直居中顯示！ 
      26. 
  
  
  
    26.  DIV#wrap{ 
      27. 
  
  
  
    27.   height:400px; 
      28. 
  
  
  
    28.   display:table; 
      29. 
  
  
  
    29.  } 
      30. 
  
  
  
    30.  DIV#content{ 
      31. 
  
  
  
    31.   vertical-align:middle; 
      32. 
  
  
  
    32.   display:table-cell; 
      33. 
  
  
  
    33.   border:1pxsolid#FF0099; 
      34. 
  
  
  
    34.   background-color:#FFCCFF; 
      35. 
  
  
  
    35.   width:760px; 
      36. 
  
  
  
    36.  } 
      37.

  • [可先修改部分代碼再運(yùn)行查看效果]
    　　這個(gè)方法應(yīng)該是很理想了，但是不幸的是InternetExplorer6并不能正確地理解display:table和display:table-cell，因此這種方法在InternetExplorer6及以下的版本中是無(wú)效的。嗯，這讓人很郁悶！不過(guò)我們還其它的辦法。#p#

    四、在InternetExplorer中的解決方案

    　　在InternetExplorer6及以下版本中，在高度的計(jì)算上存在著缺陷的。在InternetExplorer6中對(duì)父元素進(jìn)行定位后，如果再對(duì)子元素進(jìn)行百分比計(jì)算時(shí)，計(jì)算的基礎(chǔ)似乎是有繼承性的（如果定位的數(shù)值是絕對(duì)數(shù)值沒(méi)有這個(gè)問(wèn)題，但是使用百分比計(jì)算的基礎(chǔ)將不再是該元素的高度，而從父元素繼承來(lái)的定位高度）。例如，我們有下面這樣一個(gè)(X)HTML代碼段：

    ExampleSourceCode

     
 
 
      
  
  
  
      2. 
  
  
  
      3. 
  
  
  
      4. 
  
  
  
    4. 
  
  
  
    5. 
  
  
  
    6. 
  
  
  
    7.

     　　如果我們對(duì)subwrap進(jìn)行了絕對(duì)定位，那么content也會(huì)繼承了這個(gè)這個(gè)屬性，雖然它不會(huì)在頁(yè)面中馬上顯示出來(lái)，但是如果再對(duì)content進(jìn)行相對(duì)定位的時(shí)候，你使用的100%分比將不再是content原有的高度。例如，我們?cè)O(shè)定了subwrap的position為40%，我們?nèi)绻胧筩ontent的上邊緣和wrap重合的話就必須設(shè)置top:-80%;那么，如果我們?cè)O(shè)定subwrap的top:50%的話，我們必須使用100%才能使content回到原來(lái)的位置上去，但是如果我們把content也設(shè)置50%呢？那么它就正好垂直居中了。所以我們可以使用這中方法來(lái)實(shí)現(xiàn)InternetExplorer6中的垂直居中：

    ExampleSourceCode

     
 
 
      
  
  
  
    1. DIV#wrap{ 
      2. 
  
  
  
    2. border:1pxsolid#FF0099; 
      3. 
  
  
  
    3. background-color:#FFCCFF; 
      4. 
  
  
  
    4. width:760px; 
      5. 
  
  
  
    5. height:400px; 
      6. 
  
  
  
    6. position:relative; 
      7. 
  
  
  
    7. } 
      8. 
  
  
  
    8. DIV#subwrap{ 
      9. 
  
  
  
    9. position:absolute; 
      10. 
  
  
  
    10. border:1pxsolid#000; 
      11. 
  
  
  
    11. top:50%; 
      12. 
  
  
  
    12. } 
      13. 
  
  
  
    13. DIV#content{ 
      14. 
  
  
  
    14. border:1pxsolid#000; 
      15. 
  
  
  
    15. position:relative; 
      16. 
  
  
  
    16. top:-50%; 
      17. 
  
  
  
    17. } 
      18.

    　　當(dāng)然，這段代碼只能在InternetExlporer6等計(jì)算存在問(wèn)題的瀏覽器中才會(huì)有作用。（不過(guò)我不解，我查閱了很多文章，不知道是因?yàn)槌鎏幭嗤€是什么原因，似乎很多人都不愿意去解釋InternetExlporer6中這這個(gè)Bug的原理，我也只是了解了一點(diǎn)皮毛，還要再研究）

    SourceCodetoRun

     
 
 
      
  
  
  
    1. 
  
  
  
    2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      3. 
  
  
  
      4. 
  
  
  
    4. 
  
  
  
    5. 52CSS.com
      6. 
  
  
  
      7. 
  
  
  
      8. 
  
  
  
    8.  body{font-size:12px;font-family:tahoma;} 
      9. 
  
  
  
    9.  DIV#wrap{ 
      10. 
  
  
  
    10.   border:1pxsolid#FF0099; 
      11. 
  
  
  
    11.   background-color:#FFCCFF; 
      12. 
  
  
  
    12.   width:760px; 
      13. 
  
  
  
    13.   height:400px; 
      14. 
  
  
  
    14.   position:relative; 
      15. 
  
  
  
    15.  } 
      16. 
  
  
  
    16.  DIV#subwrap{ 
      17. 
  
  
  
    17.   position:absolute; 
      18. 
  
  
  
    18.   top:50%; 
      19. 
  
  
  
    19.  } 
      20. 
  
  
  
    20.  DIV#content{ 
      21. 
  
  
  
    21.   position:relative; 
      22. 
  
  
  
    22.   top:-50%; 
      23. 
  
  
  
    23.  } 
      24. 
  
  
  
    24. 
  
  
  
    25. 
  
  
  
    26. 
  
  
  
    27. 
  
  
  
      29. 
  
  
  
    29.  
      30. 
  
  
  
    30.   
      現(xiàn)在我們要使這段文字垂直居中顯示！ 
      31. 
  
  
  
    31.  DIV#wrap{ 
      32. 
  
  
  
    32.   border:1pxsolid#FF0099; 
      33. 
  
  
  
    33.   background-color:#FFCCFF; 
      34. 
  
  
  
    34.   width:760px; 
      35. 
  
  
  
    35.   height:500px; 
      36. 
  
  
  
    36.   position:relative; 
      37. 
  
  
  
    37.  } 
      38. 
  
  
  
    38.  DIV#subwrap{ 
      39. 
  
  
  
    39.   position:absolute; 
      40. 
  
  
  
    40.   border:1pxsolid#000; 
      41. 
  
  
  
    41.   top:50%; 
      42. 
  
  
  
    42.  } 
      43. 
  
  
  
    43.  DIV#content{ 
      44. 
  
  
  
    44.   border:1pxsolid#000; 
      45. 
  
  
  
    45.   position:relative; 
      46. 
  
  
  
    46.   top:-50%; 
      47. 
  
  
  
    47.  }
  •   
  •  

  • [可先修改部分代碼再運(yùn)行查看效果]#p#

    五、***的解決方案

    　　那么我們綜合上面兩種方法就可以得到一個(gè)***的解決方案，不過(guò)這要用到CSShack的知識(shí)。

    ExampleSourceCode

     
 
 
      
  
  
  
    1. DIV#wrap{ 
      2. 
  
  
  
    2. display:table; 
      3. 
  
  
  
    3. border:1pxsolid#FF0099; 
      4. 
  
  
  
    4. background-color:#FFCCFF; 
      5. 
  
  
  
    5. width:760px; 
      6. 
  
  
  
    6. height:400px; 
      7. 
  
  
  
    7. _position:relative; 
      8. 
  
  
  
    8. overflow:hidden; 
      9. 
  
  
  
    9. } 
      10. 
  
  
  
    10. DIV#subwrap{ 
      11. 
  
  
  
    11. vertical-align:middle; 
      12. 
  
  
  
    12. display:table-cell; 
      13. 
  
  
  
    13. _position:absolute; 
      14. 
  
  
  
    14. _top:50%; 
      15. 
  
  
  
    15. } 
      16. 
  
  
  
    16. DIV#content{ 
      17. 
  
  
  
    17. _position:relative; 
      18. 
  
  
  
    18. _top:-50%; 
      19. 
  
  
  
    19. } 
      20.

    　　至此，一個(gè)***的居中方案就產(chǎn)生了。

    SourceCodetoRun

     
 
 
      
  
  
  
    1. 
  
  
  
    2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      3. 
  
  
  
      4. 
  
  
  
    4. 
  
  
  
    5. 52CSS.com
      6. 
  
  
  
      7. 
  
  
  
      8. 
  
  
  
    8.  body{font-size:12px;font-family:tahoma;} 
      9. 
  
  
  
    9.  DIV#wrap{ 
      10. 
  
  
  
    10.   display:table; 
      11. 
  
  
  
    11.   border:1pxsolid#FF0099; 
      12. 
  
  
  
    12.   background-color:#FFCCFF; 
      13. 
  
  
  
    13.   width:760px; 
      14. 
  
  
  
    14.   height:400px; 
      15. 
  
  
  
    15.   _position:relative; 
      16. 
  
  
  
    16.   overflow:hidden; 
      17. 
  
  
  
    17.  } 
      18. 
  
  
  
    18.  DIV#subwrap{ 
      19. 
  
  
  
    19.   vertical-align:middle; 
      20. 
  
  
  
    20.   display:table-cell; 
      21. 
  
  
  
    21.   _position:absolute; 
      22. 
  
  
  
    22.   _top:50%; 
      23. 
  
  
  
    23.  } 
      24. 
  
  
  
    24.  DIV#content{ 
      25. 
  
  
  
    25.   _position:relative; 
      26. 
  
  
  
    26.   _top:-50%; 
      27. 
  
  
  
    27.  } 
      28. 
  
  
  
    28. 
  
  
  
    29. 
  
  
  
    30. 
  
  
  
    31. 
  
  
  
      33. 
  
  
  
    33.  
      34. 
  
  
  
    34.   
      現(xiàn)在我們要使這段文字垂直居中顯示！ 
      35. 
  
  
  
    35.  DIV#wrap{ 
      36. 
  
  
  
    36.   border:1pxsolid#FF0099; 
      37. 
  
  
  
    37.   background-color:#FFCCFF; 
      38. 
  
  
  
    38.   width:760px; 
      39. 
  
  
  
    39.   height:500px; 
      40. 
  
  
  
    40.   position:relative; 
      41. 
  
  
  
    41.  } 
      42. 
  
  
  
    42.  DIV#subwrap{ 
      43. 
  
  
  
    43.   position:absolute; 
      44. 
  
  
  
    44.   border:1pxsolid#000; 
      45. 
  
  
  
    45.   top:50%; 
      46. 
  
  
  
    46.  } 
      47. 
  
  
  
    47.  DIV#content{ 
      48. 
  
  
  
    48.   border:1pxsolid#000; 
      49. 
  
  
  
    49.   position:relative; 
      50. 
  
  
  
    50.   top:-50%; 
      51. 
  
  
  
    51.  }
  •   
  •  

  • [可先修改部分代碼再運(yùn)行查看效果]

    　　垂直居中vertical-align的值是middle，而水平居中align的值是center，雖然同是居中但關(guān)鍵字不同。


    新聞標(biāo)題：CSS中實(shí)現(xiàn)DIV容器垂直居中方法揭秘
    鏈接URL：http://www.dlmjj.cn/article/dpdsjph.html