CSS解决未知高度垂直居中的问题——IE6/IE7/FF3测试正常

项目组同事反映前阵子做的一个登录界面在IE7下登录框神秘消失了。自己查看了一下汗了一把，不但IE7不能正常显示，FF3.0.3也是如此。

翻查了之前的技术博客记录和相关资料，发现原来的解决方法已经outdate了。小修正了一下，整理如下：

针对的问题主要是未知高度垂直居中。

XHTML：

<div id="outer">

    <div id="middle">

        <div class="greenBorder" id="inner">

        </div>

    </div>

</div>

CSS:

body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer{height: 100%;width:100%;overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}/*for FF*/
#middle{position:absolute;top:50%;}
#middle[id] {display: table-cell; vertical-align: middle; position: static;}/*for FF*/
#inner{position: relative;top:-50%;width: 250px;margin: 0 auto;}
*+html #outer[id] {position: relative;} /* for IE7 */
*+html #middle[id] {position: absolute;} /* for IE7 */

另：这里有一句话解决IE8兼容问题的，没试过，地址在这里：http://eroading.com/web-frontend-develop/ie8-compatible-solve