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

这种方法在现代浏览器下是非常方便。但是在IE6-7中是不被支持的，因为display:table在IE6-7中不被支持，那么为了解决这种方法在IE6-7的兼容，需要额外增加一个div，并使用hack，下面我们一起来看看其解决办法。

HTML Markup

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

<div class="table">  

 <div class="tableCell">  

  <div class="content">content</div>  

 </div>  

</div>  

CSS Code

CSS Code复制内容到剪贴板

.table {   

 height: 300px;/*高度值不能少*/  

 width: 300px;/*宽度值不能少*/  

 display: table;   

 position: relative;   

 float:left;   

}     

.tableCell {   

 display: table-cell;   

 vertical-align: middle;   

 text-align: center;      

 padding: 10px;   

 *position: absolute;   

 *top: 50%;   

 *left: 50%;   

}   

.content {   

 *position:relative;   

 *top: -50%;   

 *left: -50%;   

}  

（编辑：网站开发网_安阳站长网）

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