top:-50%

  #outer{height:100%;overflow:hidden;position:relative;width:100%;background:ivory;}
//使#outer高度满屏，超出隐藏，宽度满屏，相对定位（这个高度满屏建立在上一句的基础上才有效果。）
#middle{position:absolute;top:50%}
//相对于#outer绝对定位，距离屏幕顶端50%；其顶端就是屏幕垂直中间的一条线。
#inner{position:relative;top:-50%;width:400px;margin:0 auto;}
//#inner相对于#middle相对定位，top的参考线就是#milddle的顶端 ，也就是屏幕垂直方向的中线。
由于#inner的高度不确定，我们将其按自身大小上移一半就可以实现#inner在屏幕中绝对居中了。