快速业务通道

CSS实现不定高度DIV绝对居中

作者 佚名技术 来源 CSS编程 浏览 发布时间 2012-05-26

一般来说,指定高度的DIV垂直和水平居中比较方便,而不定高度的话就稍微麻烦了点,我尝试了一下,通过2个辅助的DIV实现了绝对居中,兼容IE和FF等标准浏览器。

CSS代码:

#wrapper{height:100%;width:100%;overflow:hidden;position:relative}
#wrapper[id]{display:table;}
#mid{position: absolute;top:50%;left:50%}
#mid[id]{display:table-cell;left:0;vertical-align:middle;position:static}
#box{position:relative;top:-50%;left:-50%;z-index:9999;width:300px}
#box[id]{left:0;margin:0 auto;}
div.boxstyle{border:2px solid #000;text-align:center;padding:5px;}

XHTML代码:

<div id="wrapper">
<div id="mid">
<div id="box" class="boxstyle">
<p>http://bolm.cn</p>
<p>DIV绝对居中示例</p>
</div>
</div>
</div>


     简单解释下,wrapper为外层,mid为中间层,box即为绝对居中的那层。

     在FF等标准浏览器中可以通过将wrapper层的演示方式为table,mid层设置为table-cell的显示方式,这样就可以使用 vertical-align:middle实现中间层的绝对垂直居中,而IE中则使用了top:50%的方式,以及后面box设置的相对定位-50%来 达到垂直居中。水平居中的方式也不同,FF可以很简单的设置margin实现,而IE则同样设置了left互相抵消的方式实现。

     另外类似#box[id]这样的表达方式只有FF等标准浏览器认识,所以可以在这里设置属于FF等浏览器的样式。

     由于未设置box的高度,默认就为auto不定高了,不定宽也同理。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号