Impossible de centrer l'image

Question

J'essaie de noircir l'écran et de centrer une image au milieu de l'écran, au-dessus de tous les autres éléments. Ce que j'ai ne fonctionne pas (l'image étant centrée).

NOTE - Je sais qu'il y a probablement des plugins pour cela ... mais j'essaie de comprendre comment le faire et comment cela fonctionne.

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; 
} 

Mon image que je l'affichage est en bas à droite de l'screen..not au centre. Qu'est-ce que je fais mal?

JsFiddle Here

Answer 1

Centering elements vertically is hard. Une solution triviale serait le centrage de l'arrière-plan d'un élément couvrant l'écran:

#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 avec un bgcolor semi-transparent à des fins de démonstration

Answer 2

vous pouvez faire la superposition fixe positionné avec la largeur et la hauteur 100percent et un grand zindex. Maintenant, vous avez un div noir trnslucent qui couvre toute la fenêtre, pas tout le document que vous essayez. Comme nous avons ce positionné fixe, il ne défilera pas même si vous faites défiler la page. Maintenant, pour centrer l'image, utilisez vos simples calculs. Une méthode consiste à faire en sorte que l'image soit positionnée à l'état absolu avec 50% de gauche et ensuite marginleft comme - (largeur de l'image/2). Ceci est utile si la largeur de l'image est la même pour tous les cas et peut être ajouté sur css. Dans ce cas, il vous suffit de fondre et de fondre le div overlay avec jquery. Aucun code pour l'instant car je suis sur mobile.

Answer 3

Vous pouvez le faire avec CSS pur: http://jsfiddle.net/5rRqS/2/ (je ne suis pas sûr de tous les navigateurs). Lorsque votre script est runnig image ont largeur = 0px et height = 0, si vous voulez utiliser JS, vous devez exécuter le script de positionnement après le chargement de l'image ou ajouter la largeur et la hauteur de l'image (par attributs ou styles)

Ensuite, utilisez quelque chose comme

$(img).load(function(){ 
    // positioning script here 
})