完美解决fixed 水平居中问题

最新推荐文章于 2022-03-25 16:28:00 发布

weixin_30525825

最新推荐文章于 2022-03-25 16:28:00 发布

阅读量505

点赞数

原文链接：http://www.cnblogs.com/w3cjiangtao/p/3187475.html

版权

群里的朋友问的，发现自己没写过；就写了下，原理和网上的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)));
}