一聚教程网:一个值得你收藏的教程网站

热门教程

CSS Div完美居中方法

时间:2022-06-25 10:09:50 编辑:袖梨 来源:一聚教程网

CSS中有很多(水平/垂直)居中的方法今天刚好看到一个新的方法,嘿嘿,自我感觉一下非常好用.而且以前我也没见过.所以今天就记一下.下次备用

HTML

 代码如下 复制代码


CSS

.center{
/* 需要宽度支持但自适应 */
 position:relative;
}

.center>*{
/* ie8+,ie7-请使用js或者其它方法 */

position:absolute; margin:auto; overflow:auto; top:0; left:0; bottom:0; right:0;}
.demo{ width:200px; height:200px; background-color:#55DF00;}
.demo>div{ width:500px; height:500px; background-color:#2A5F00;}


结果如图所示

当然人无完人,这个方法也是有他的局限性的,就是IE7-不支持此方法.

由于使用了绝对定位,子元素会居于父元素的左上角.这点需要切记,

但是我还是很喜欢这种方法,跟其它的居中方法有很多的区别,对于子元素里面的元素样式干扰很少.用起来还是挺棒的.

热门栏目