完美解决fixed 水平居中问题

群里的朋友问的,发现自己没写过;就写了下,原理和网上的fixed上下左右四个角的原理一样!

1、防止页面振动:

body{
    _background-image: url(about:blank);
    _background-attachment: fixed;
}

2、水平垂直居中:

div{
    width:100px;
    height:100px;
    background:#999;
    position:fixed;
    top:50%;
    left:50%;
    margin-left:-50px;
    margin-top:-50px;
    position: absolute;
    _left:expression(eval(document.documentElement.clientWidth/2 + document.documentElement.scrollLeft - this.offsetWidth/2 - parseInt(this.currentStyle.marginLeft,10) - parseInt(this.currentStyle.marginRight,10))) ; 
    _top:expression(eval(document.documentElement.clientHeight/2 + document.documentElement.scrollTop  - this.offsetHeight/2 - parseInt(this.currentStyle.marginTop,10) - parseInt(this.currentStyle.marginBottom,10)));
}

处理了有margin,border的情况下 

很简单的例子,复习了下js里面的盒子模型

posted on 2013-07-13 02:47  _Novice  阅读(1519)  评论(0编辑  收藏  举报