首頁>Club>
7
回覆列表
  • 1 # 雪33969055

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

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

    XML/HTML Code複製內容到剪貼簿

    <div class="block" style="height: 300px;">  

        <div class="centered">  

            <h1>haorooms案例題目</h1>  

            <p>haorooms案例內容,haorooms案例內容haorooms案例內容haorooms案例內容haorooms案例內容haorooms案例內容haorooms案例內容haorooms案例內容haorooms案例內容</p>  

        </div>  

    </div>  

    css如下:

    CSS Code複製內容到剪貼簿

    /* This parent can be any width and height */  

    .block {   

      text-align: center;   

    }   

    /* The ghost, nudged to maintain perfect centering */  

    .block:before {   

      content: "";   

      display: inline-block;   

      height: 100%;   

      vertical-align: middle;   

      margin-right: -0.25em; /* Adjusts for spacing */  

    }   

    /* The element to be centered, can  

       also be of any width and height */    

    .centered {   

      display: inline-block;   

      vertical-align: middle;   

      width: 50%;   

    }  

    方法二:
    可以用table佈局方法,但是這種方法也有侷限性!
    寫法如下:

    XML/HTML Code複製內容到剪貼簿

    <table style="width: 100%;">  

      <tr>  

         <td style="text-align: center; vertical-align: middle;">  

              Unknown stuff to be centered.   

         </td>  

      </tr>  

    </table>  

    由於table寫法比較費時,你也可以用div代替table,寫法如下:
    html:

    XML/HTML Code複製內容到剪貼簿

    <div class="something-semantic">  

       <div class="something-else-semantic">  

           Unknown stuff to be centered.   

       </div>  

    </div>  

    css:

    CSS Code複製內容到剪貼簿

    .something-semantic {   

       display: table;   

       width: 100%;   

    }   

    .something-else-semantic {   

       display: table-cell;   

       text-align: center;   

       vertical-align: middle;   

    }  

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

    CSS Code複製內容到剪貼簿

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   

    <head>   

        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">   

        <title>haorooms不固定高度div寫法</title>   

        <style>   

    .center {   

      position: fixed;   

      top: 50%;   

      left: 50%;   

      background-color: #000;   

      width:50%;   

      height: 50%;   

    -webkit-transform: translateX(-50%) translateY(-50%);   

    }   

        </style>   

    </head>   

    <body>   

        <div class="center"></div>   

    </body>   

    </html>  

    我上面的css只是針對webkit核心的瀏覽器,其他核心瀏覽器寫法如下:

    CSS Code複製內容到剪貼簿

    -webkit-transform: translateX(-50%) translateY(-50%);   

    -moz-transform: translateX(-50%) translateY(-50%);   

    -ms-transform: translateX(-50%) translateY(-50%);   

    transform: translateX(-50%) translateY(-50%);  

    有些彈出層的樣式,也可以用這個方法居中

    CSS Code複製內容到剪貼簿

    position: fixed;   

    top: 50%;   

    left: 50%;   

    width: 50%;   

    max-width: 630px;   

    min-width: 320px;   

    height: auto;   

    z-index: 2000;   

    visibility: hidden;   

    -webkit-backface-visibility: hidden;   

    -moz-backface-visibility: hidden;   

    backface-visibility: hidden;   

    -webkit-transform: translateX(-50%) translateY(-50%);   

    -moz-transform: translateX(-50%) translateY(-50%);   

    -ms-transform: translateX(-50%) translateY(-50%);   

    transform: translateX(-50%) translateY(-50%);  

    無固定高度的div垂直居中程式碼要點:
    父容器vc的css屬性 display:table;overflow:hidden;
    子容器vci的css屬性 vertical-align:middle;display:table-cell;
    針對ie6的hack,vci容器的 _position:absolute;_top:50%; 和content容器的 _position:relative; _top:-50%;

  • 中秋節和大豐收的關聯?
  • 怎樣辨別真假頭髮?