javascript - 无法居中图像

Question

我正在尝试使屏幕变黑，并将图像居中放置在屏幕中间，高于所有其他元素。我所拥有的不起作用(图像居中)。

注意 - 我知道可能有用于此的插件..但我正在尝试弄清楚如何去做以及它是如何工作的。

var docHeight = $(document).height();

$("body").append("<div id='overlay'></div>");

$("#overlay").height(docHeight).css({
    'opacity': 0.4,
    'position': 'relative',
    'top': 0,
    'left': 0,
    'color': 'white',
    'background-color': 'black',
    'width': '100%',
    'z-index': 5000
});

$("#overlay").append("<div id='image-container'><img id='photo' src='" + $(this).attr('rel') + "' alt='image' /></div>");

$("#image-container").css("position", "absolute");
$("#image-container").css("top", Math.max(0, (($(window).height() - $("#image-container").outerHeight()) / 2) + $(window).scrollTop()) + "px");
$("#image-container").css("left", Math.max(0, (($(window).width() - $("#image-container").outerWidth()) / 2) + $(window).scrollLeft()) + "px");

CSS:

#image-container {
    background: #FF0000;
    z-index: 999999;
}

我正在显示的图像位于屏幕的右下角……而不是中央。我做错了什么？

JsFiddle Here

Answer 1

Centering elements vertically is hard .一个简单的解决方法是将覆盖屏幕的元素的背景居中:

#overlay {
    /*Cover the entire screen regardless of scrolling*/
    position:fixed;top:0;right:0;bottom:0;left:0;
    background: #ff0000 url(...) no-repeat 50% 50%;
}

Fiddle'd带有用于演示目的的半透明 bgcolor