CSS垂直方向上的居中，尽管CSS有vertical-align属性，但是并不能有效解决未知高度的垂直居中问题，如果在一个DIV标签里有未定义高度的文字或图片，那就更不好弄了）。
在一些标准浏览器如Mozilla, Opera, Safari.，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。
非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。就像下面的代码，可解决使用vertical-align属性不能解决的垂直居中问题：
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%;}
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;}
div.greenBorder {border: 1px solid green; background-color: ivory;}DIV部分：
<div id="outer"> <div id="middle"> <div id="inner" class="greenBorder"> </div> </div> </div>
本方法兼容性也是很不错的，只不过有些麻烦，但各大浏览器的兼容性我们又没法控制，所以就凑合吧，总比没有解决办法要好得多。本文不涉及水平方向上的居中，水平方向上当然比较容易些，可以margin:auto试一下。
