让文本或图片在div容器中垂直居中

来自http://www.cnitblog.com/2013/archive/2006/02/25/6931.html

让文本或图片在div容器中垂直居中,相信这个例子很多朋友都想知道.这是在一个老外的站点发现的.

< div  id ="outer" >
   < div  id ="middle" >
     < div  id ="inner" >
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
     </ div >
   </ div >
</ div >

样式表:

<style type="text/css">
#outer  { height :  400px ;  overflow :  hidden ;  position :  relative ; }
#outer[id]  { display :  table ;  position :  static ; }

#middle  { position :  absolute ;  top :  50% ; }   /*  for explorer only */
#middle[id]  { display :  table-cell ;  vertical-align :  middle ;  position :  static ; }

#inner  { position :  relative ;  top :  -50% }   /*  for explorer only  */
/*  optional: #inner[id] {position: static;}  */
</style>