欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

不固定寬度和高度的情況下CSS調(diào)整div居中的方法總結(jié)

haorooms   發(fā)布時(shí)間：2016-06-14 11:16:15   作者：Aaron   我要評(píng)論
這里我們來看一下在不固定寬度和高度的情況下CSS調(diào)整div居中的方法總結(jié),考慮到了老IE的兼容性,同時(shí)也有CSS3的translate屬性解決方法介紹,需要的朋友可以參考下

很多新手在寫css的時(shí)候經(jīng)常遇到的一個(gè)問題，當(dāng)div沒有固定的寬度或者高度的時(shí)候，如何才能讓div水平或者垂直居中顯示。
如果div有固定寬度的話，用padding，margin都很容易實(shí)現(xiàn)。方法有很多種。不過經(jīng)常遇到這種div沒有固定的寬度高度的情況，我們就不能用margin,padding設(shè)置固定的距離了。這個(gè)問題讓很多人頭疼。而怎么樣才能讓這個(gè)div居中顯示呢？其實(shí)這種情況解決的辦法也是有很多種，js，css都可以實(shí)現(xiàn)。
這里主要介紹一下采用css的方法，有什么問題還請(qǐng)各位看官指出。

方法一：
用一個(gè)“ghost”偽元素（看不見的偽元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是這個(gè)方法要求待居中的元素是 inline-block，不是一個(gè)真正通用的方案。
html如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="block" style="height: 300px;">  
  2.     <div class="centered">  
  3.         <h1>haorooms案例題目</h1>  
  4.         <p>haorooms案例內(nèi)容，haorooms案例內(nèi)容haorooms案例內(nèi)容haorooms案例內(nèi)容haorooms案例內(nèi)容haorooms案例內(nèi)容haorooms案例內(nèi)容haorooms案例內(nèi)容haorooms案例內(nèi)容</p>  
  5.     </div>  
  6. </div>  

css如下：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* This parent can be any width and height */  
  2. .block {   
  3.   text-align: center;   
  4. }   
  5. /* The ghost, nudged to maintain perfect centering */  
  6. .block:before {   
  7.   content: '';   
  8.   display: inline-block;   
  9.   height: 100%;   
  10.   vertical-align: middle;   
  11.   margin-right: -0.25em; /* Adjusts for spacing */  
  12. }   
  13. /* The element to be centered, can  
  14.    also be of any width and height */    
  15. .centered {   
  16.   display: inline-block;   
  17.   vertical-align: middle;   
  18.   width: 50%;   
  19. }  

方法二：
可以用table布局方法，但是這種方法也有局限性！
寫法如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <table style="width: 100%;">  
  2.   <tr>  
  3.      <td style="text-align: center; vertical-align: middle;">  
  4.           Unknown stuff to be centered.   
  5.      </td>  
  6.   </tr>  
  7. </table>  

由于table寫法比較費(fèi)時(shí)，你也可以用div代替table,寫法如下：
html：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="something-semantic">  
  2.    <div class="something-else-semantic">  
  3.        Unknown stuff to be centered.   
  4.    </div>  
  5. </div>  

css:

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .something-semantic {   
  2.    display: table;   
  3.    width: 100%;   
  4. }   
  5. .something-else-semantic {   
  6.    display: table-cell;   
  7.    text-align: center;   
  8.    vertical-align: middle;   
  9. }  

方法三，終極解決方法：
以上2中方法可能都有其局限性，我介紹的第三中方法是比較成熟的不是固定高寬div的垂直居中的方法！但是方法是css3的寫法，想兼容IE8的童鞋們，建議用上面的方法！
方法和我們固定高寬的差不多，但是不用margin我們用的是 translate()
demo如下：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   
  3. <head>   
  4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">   
  5.     <title>haorooms不固定高度div寫法</title>   
  6.     <style>   
  7. .center {   
  8.   position: fixed;   
  9.   top: 50%;   
  10.   left: 50%;   
  11.   background-color: #000;   
  12.   width:50%;   
  13.   height: 50%;   
  14. -webkit-transform: translateX(-50%) translateY(-50%);   
  15. }   
  16.     </style>   
  17. </head>   
  18. <body>   
  19.     <div class="center"></div>   
  20. </body>   
  21. </html>  

我上面的css只是針對(duì)webkit內(nèi)核的瀏覽器，其他內(nèi)核瀏覽器寫法如下：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. -webkit-transform: translateX(-50%) translateY(-50%);   
  2. -moz-transform: translateX(-50%) translateY(-50%);   
  3. -ms-transform: translateX(-50%) translateY(-50%);   
  4. transform: translateX(-50%) translateY(-50%);  

有些彈出層的樣式，也可以用這個(gè)方法居中

CSS Code復(fù)制內(nèi)容到剪貼板
  1. position: fixed;   
  2. top: 50%;   
  3. left: 50%;   
  4. width: 50%;   
  5. max-width: 630px;   
  6. min-width: 320px;   
  7. height: auto;   
  8. z-index: 2000;   
  9. visibility: hidden;   
  10. -webkit-backface-visibility: hidden;   
  11. -moz-backface-visibility: hidden;   
  12. backface-visibility: hidden;   
  13. -webkit-transform: translateX(-50%) translateY(-50%);   
  14. -moz-transform: translateX(-50%) translateY(-50%);   
  15. -ms-transform: translateX(-50%) translateY(-50%);   
  16. transform: translateX(-50%) translateY(-50%);  

無固定高度的div垂直居中代碼要點(diǎn)：
父容器vc的css屬性 display:table;overflow:hidden;
子容器vci的css屬性 vertical-align:middle;display:table-cell;
針對(duì)ie6的hack，vci容器的 _position:absolute;_top:50%; 和content容器的 _position:relative; _top:-50%;

相關(guān)文章

最新評(píng)論