Unable to center image

Question

I'm trying to black out the screen and center an image in the middle of the screen, above all other elements. What I have doesn't work (the image being centered part).

NOTE - I know there are probably plugins for this..but I'm trying to figure out how to do it and how it works.

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

My image that I'm displaying is in the bottom right of the screen..not in the center. What am I doing wrong?

JsFiddle Here

yes, if that is a big image that's not a good solution, your code centered the image here, http://jsfiddle.net/5rRqS/, what is the problem? — undefined, Jun 20 '12 at 22:27
Look at the updated with an image: this also centers the top left in the middle, not the middle of the image in the middle. http://jsfiddle.net/5rRqS/1/ — Cody, Jun 20 '12 at 22:31
look at BlockUI plugin and reverse engineer it. Has been battle tested for years, and put together by well regarded plugin author who's plugins are on many big name sites. A few minutes in spent in Firebug will explain a lot to you — charlietfl, Jun 20 '12 at 22:50
@DoctorOreo - **Fun fact:** You don't need `+"px"` in `.css()` in jQuery. — Derek 朕會功夫, Jun 21 '12 at 00:41

score 1 · Accepted Answer · edited May 23 '17 at 12:04

1

Centering elements vertically is hard. A trivial workaround would be centering the background of an element covering the screen:

#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 with a semitransparent bgcolor for demo purposes

edited May 23 '17 at 12:04

Community

1
1

answered Jun 21 '12 at 02:21

Oleg

22,838
4
55
82

Perfect. I was trying to also block out the screen using absolute positioning, but due to my other elements it wouldn't work. – Cody Jun 27 '12 at 16:24

score 0 · Answer 2 · answered Jun 20 '12 at 22:40

you can make the overlay fixed positioned with width and height 100percent and a big zindex. Now you have a trnslucent black div that covers the entire window, not entire document as you are trying. As we have this positioned fixed it wont scroll even if you scroll page. Now to center the image use your simple math. One method is to make image positioned absolute with left as 50percent and then marginleft as -(width of image/2) . This is useful if the image width is same for all cases and can be added on css. In that case you just have to fadein and fade out the overlay div with jquery. No codes for now as i am on mobile.

score 0 · Answer 3 · answered Jun 20 '12 at 22:49

0

You can do this with pure CSS: http://jsfiddle.net/5rRqS/2/ (im not sure about all browsers).

When your script is runnig image have width=0px and height=0 so, if you want use JS, you have to run positioning script after image is loaded, or add image width and height to (by attributes or styles)

Then use something like

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

answered Jun 20 '12 at 22:49

mborecki

127
4

Your css solution is incorrect since when setting top margins in %, the value is calculated *as a percentage always relative to the **width** of the containing block* https://developer.mozilla.org/en/CSS/margin-top – Oleg Jun 21 '12 at 02:24
is correct - containing block for img is #image-container and it has always the same size like img. – mborecki Jun 22 '12 at 17:29
wrong again, just substitute an image with different dimensions and it becomes obviously uncentered: http://jsfiddle.net/ovfiddle/5rRqS/3/ – Oleg Jun 22 '12 at 22:49

Unable to center image

3 Answers3