如何實現未知高居垂直居中?_Div+CSS教程

      編輯Tag賺U幣
      教程Tag:暫無Tag,歡迎添加,賺取U幣!
        
        盡管我們知道CSS的vertical-align特性,但是并不能有效解決未知高度的垂直居中問題(在一個div容器里有未知高度的文本或圖片的情況下)。

        標準瀏覽器如Mozilla,Opera等,可將父級元素顯示方式設定為TABLE(display: table;) ,內部子元素定為table-cell (display: table-cell),通過vertical-align特性使其垂直居中,但非標準瀏覽器是不支持的。依然解決不了未知高居垂直居中。

        非標準瀏覽器只能在子元素里設距頂部50%,里面再套一個容器元素距頂部-50% 來抵消。最終實現未知高居垂直居中的設置。

        看下面的CSS代碼:

      示例代碼 [www.wf0088.com]
      body {padding: 0; margin: 0;}
      body,html{height: 100%;}
      #outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}
      #outer[id] {display: table; position: static;}
      #middle {position: absolute; top: 50%;} /* for explorer only*/
      #middle[id] {display: table-cell; vertical-align: middle; position: static;}
      #inner {position: relative; top: -50%;width: 400px;margin: 0 auto;} /* for explorer only */
      div.greenBorder {border: 1px solid green; background-color: ivory;}

        下面是XHTML代碼:

      示例代碼 [www.wf0088.com]
      <div id="outer">
      <div id="middle">
      <div id="inner" class="greenBorder">
      </div>
      </div>
      </div>

        我們來看看最終(未知高居垂直居中)效果的實例演示:

      代碼調試框 [www.wf0088.com]

      [ 可先修改部分代碼 再運行查看效果 ]

        

      來源:無憂整理//所屬分類:Div+CSS教程/更新時間:2007-01-26
      相關Div+CSS教程