在任何尺寸的屏幕上制作叠加都完美地居中

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

@udders;也许你可以为你的元素定义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