全面总结使用CSS实现水平垂直居中效果的方法(5)

  <p>I am vertically centered!</p>  

 </div>  

 <div id="extra"><!-- ie comment --></div>  

</div>  

CSS Code

CSS Code复制内容到剪贴板

<style type="text/css">   

html,   

body{   

 height: 100%;   

}   

#parent {   

 height: 500px;/*定义高度，让线盒型div#extra有一个参照物，可以是固定值，也可以是百分比*/  

 border: 1px solid red;   

}   

#vertically_center,   

#extra {   

 display: inline-block;/*把元素转为行内块显示*/  

 vertical-align: middle;/*垂直居中*/  

}   

#extra {   

 height: 100%; /*设置线盒型为父元素的100%高度*/  

}   

</style>   

<!--[if lt IE 8]>   

 <style type="text/css">   

  /*IE6-7不支持display:inline-block，所以在ie6-7另外写一个hack，用来支持ie6-7*/  

  #vertically_center,   

  #extra {   

   display: inline;   

   zoom: 1;   

  }   

  #extra {   

  width: 1px;   

  }   

 </style>   

<![endif]-->  

优点：

可以自适应高度，简单易懂

缺点：

（编辑：ASP站长网）