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

  <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]-->  

优点：

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

缺点：

需要给元素的父元素设置一个高度，这个高度可以是一个固定值或者百分值高度，另外需要增加一个额外的标签，当作线盒型，如div#extra，并且需要设置其高度为100%。另外就是ie6-7不支持display:inline-block，需要给他们另外写一个样式。

方式六：
这个方法是针对多行内容居中，而且容器高度是可变的，方法很简单，就是给出上下一样的padding值

Html Code

XML/HTML Code复制内容到剪贴板

<div class="columns">  

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!