Question

我有<条码>div,需要在网页浏览后垂直放在屏幕上。

http://jsfiddle.net/JtZ7F/“rel=“nofollow” http://jsfiddle.net/JtZ7F/。

<div style="height:1000px; border:1px solid red;">
    scroll
    <span style="height:150px; width:100px; float:right; border:1px solid green; display:block; position:fixed;top:50%; margin-top:-75px;">
        need vertical center of the screen after page scroling
    </span>
</div>

现在,我使用<代码> :固定;,它不是解决办法。

我想,当我停止把我的绿箱上滚动的网页时,我会顺利地转移到屏幕的垂直中心。

我怎么能够这样做呢?

Answer 1

在你的领导下增加这一职能:

jQuery.fn.center = function () {   
this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");    
 this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");     return this; }

在“测试”之前添加一个字句,并在文件中写下以下文字。准备就绪

$(document).ready(function(){    
$( #test ).center(); 
});

Answer 2

这里,我如何做,在 Chrome和安检;IE7+,见jsfiddle。

$.fn.center = function () {
                    return this.css({
                         left : ($(window).width() / 2) - $(this).width() / 2,
                         top : ($(window).height() / 2) - $(this).height() / 2,
                         position :  fixed 
                    });
                };

使用:

$(document).ready(function(){ 
    $(element).center();
});

友情链接