完美居中

横向居中：在除IE的其他浏览器中position:relative; margin:0 auto;可以实现横向居中，而IE的怪异模型需要使用text-align:center;
纵向居中：其他浏览器中父元素使用display:table;子元素使用display:table-cell; vertical-align:middle;即可实现完美垂直居中，而IE中不支持此属性，我们必须在父元素中使用position:absolute; top:50%;子元素中使用position:relative; top:-50%;

为了写出通用的CSS代码，我们还必须使用!important（IE不支持此属性）来消除IE与其他浏览器中的差异。

   

       

       

   

html,body{text-align:center; background-color:#000000; margin:0; padding:0;}
#outer {height:100%; width:600px; overflow:hidden; position:relative;  margin:0 auto; display:table; text-align:left;}
#middle {position:static!important; position:absolute; top:50%; display:table-cell; vertical-align:middle;}
#inner {position:static!important; position:relative; top:-50%; width:600px; height:400px;}

支持的浏览器：IE7，Netscape Navigator 9，Opera 9，FireFox 2，Safari 3