javascript - 使叠加层在任何尺寸的屏幕上都完美居中

Question

我有一个元素需要在屏幕上水平和垂直居中放置，我不使用 jQuery 来执行此操作，但我将如何处理它，目前我的代码如下所示，

$("dd a, dt a, .job_listings a, #similar_jobs a").live("click", function(){
    var self = $(this);
    $("#overlay").fadeIn('slow');
    var targetProcent = 68;
    var targetWidth = $(window).width() * (targetProcent / 100);
    var targetHeight = $(window).height() * (targetProcent / 100);   
    var targetX = ($(window).width() - 827) / 2;
    var targetY = 75;
    $('#lightbox').load(self.attr("href"));
    //usePointFromPostcode(document.getElementById('postcode').value, placeMarkerAtPoint)
    $('#lightbox').css({
        "position": "absolute", 
        "top": $(window)+75+"px", 
        "left": targetX+"px"
    }).fadeIn('slow');
    //$('html, body').animate({scrollTop:0}, 'slow');
    return false;
});

Answer 1

@乳房；也许你可以为你的元素定义 position :absolute CSS

div{
width:300px;
height:300px;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-150px;
}

给 margin 元素的一半 height & width

查看这些链接以获取更多信息:

Centering things Vertically (and Horizontally)

Centering page content vertically