[CSS] - CSS实现不定高度DIV绝对居中
2010-05-14 15:35
453 查看
来源:http://www.knowsky.com/442392.html
一般来说,指定高度的DIV垂直和水平居中比较方便,而不定高度的话就稍微麻烦了点,我尝试了一下,通过2个辅助的DIV实现了绝对居中,兼容IE和FF等标准浏览器。
CSS代码:
XHTML代码:
简单解释下,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不定高了,不定宽也同理。
一般来说,指定高度的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 #000000; 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不定高了,不定宽也同理。
相关文章推荐
- 用CSS来实现不定高度DIV绝对居中
- CSS实现不定高度DIV绝对居中
- CSS实现不定高度垂直居中 兼容IE7
- css实现高度不固定的div元素模块在页面中水平垂直居中
- CSS之通过定位简单实现div绝对居中
- CSS实现文本高度不定的垂直居中方案
- CSS实现已知宽高的div垂直居中;自适应高度两列布局
- css实现高度或者宽度不固定的div元素垂直左右居中
- css实现div的水平垂直居中方法
- CSS实现图片在DIV中上下左右居中(1)
- 纯CSS实现图片水平垂直居中于DIV(图片未知宽高)
- css实现在div中垂直水平居中
- 如何实现未知高居垂直居中?_div+css布局教程
- CSS:绝对定位元素实现水平居中
- 父元素为一个div,宽度高度不固定,子元素是一个块状元素,宽高已知,如何实现子元素在父元素内水平、垂直居中?
- CSS自适应高度的div垂直水平居中
- css中position:fixed实现div居中
- 通过css实现div的居中
- css中position:fixed实现div居中上下左右居中
- css样式实现左边的固定宽度和高度的图片或者div跟随右边高度不固定的文字或者div垂直居中(文字高度超过图片,图片跟随文字居中,反之文字跟随图片居中非table实现)