让文本或图片在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>