CSS解決未知高度垂直居中

儘管有 CSS 的 vertical-align 特性，但是並不能有效解決未知高度的垂直居中問題（在一個 DIV 標籤裡有未知高度的文字或圖片的情況下）。

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

      非標準瀏覽器只能在子元素裡設距頂部 50% ，裡面再套個元素距頂部 -50% 來抵消。

      CSS部分：

          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部分：

          <div id=”outer”>

          <div id=”middle”>

             <div id=”inner” class=”greenBorder”></div>

           </div>

           </div>

      以上 CSS 程式碼的優點是沒有 hacks，採用了 IE 不支援的 CSS2 選擇器 #value[id] 。

      CSS2選擇器 #value[id] 相當於選擇器 #value ，但是 Internet Explorer 不支援這種型別的選擇器。同樣地 .value[class] ，相當於 .value ，這些只有標準瀏覽器能讀懂。

      測試：Firefox1.5、Opera9.0、IE6.0、IE5.0通過。