CSS垂直方向上的居中，盡管CSS有vertical-align屬性，但是並不能有效解決未知高度的垂直居中問題，如果在一個DIV標簽裡有未定義高度的文字或圖片，那就更不好弄了）。
在一些標准浏覽器如Mozilla, Opera, Safari.，可將父級元素顯示方式設定為TABLE(display: table;) ，內部子元素定為table-cell (display: table-cell),通過vertical-align特性使其垂直居中，但非標准浏覽器是不支持的。
非標准浏覽器只能在子元素裡設距頂部50%，裡面再套個元素距頂部-50% 來抵消。就像下面的代碼，可解決使用vertical-align屬性不能解決的垂直居中問題：
CSS代碼部分：
1
body {padding: 0; margin: 0;}
2
body,Html{height: 100%;}
3
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}
4
#outer[id] {display: table; position: static;}
5
#middle {position: absolute; top: 50%;}
6
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
7
#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;}
8
div.greenBorder {border: 1px solid green; background-color: ivory;}
DIV部分：
1
<div id="outer">
2
<div id="middle">
3
<div id="inner" class="greenBorder">
4
</div>
5
</div>
6
</div>
本方法兼容性也是很不錯的，只不過有些麻煩，但各大浏覽器的兼容性我們又沒法控制，所以就湊合吧，總比沒有解決辦法要好得多。本文不涉及水平方向上的居中，水平方向上當然比較容易些，可以margin:auto試一下。