Center an Image Vertically in a Fixed Position Div

Question

There are tons of questions on SO regarding vertical alignment, but I haven't discovered a clear answer to my problem.

I created a fiddle to show exactly what I'm trying to do.

HTML:

<div id="fade"></div>
<div id="fullscreen">
    <img src="http://jira.seraphdevelopment.com/jmajewski/clean/uploads/pictures/n8jvxzd2476480d0.jpg" />
</div>

CSS:

#fade {
    /* Cover the entire viewport. */
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;

    /* Transparent Background */
    background-color: #000;
    opacity: 0.50;
}

#fullscreen {
    /* Cover the entire viewport. */
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

#fullscreen img {
    /* Adding the display: block allowed me to center
       the image horizontally with the margin: auto. */
    display: block;
    margin: auto;

    /* Limit the size of the image. */
    max-width: 80%;
    max-height: 80%;

    /* This didn't work for me. */
    vertical-align: middle;

    /* This didn't do anything, either. */
    line-height: 100%;
}

I am trying to make a lightbox of sorts, such that the user will click on an image on the page, causing that same image to load up in fullscreen mode. The first div, fade, will be used to cover the entire page with a semi-transparent black background, essentially giving the effect of the page fading away, while also making things modal.

I wanted to be able to nest the image inside the fade div, but I ran into a problem. Setting the opacity on the outer div (to create the fade effect) caused my nested image to inherit the opacity value. Thus, I added a separate div that was identical to the first one, except without the background, and nested the image inside of that.

For the record, I did manage to figure out a workaround to the opacity issue, but I haven't yet implemented it. Credit to Blowski, a SO user who posted this answer to a question regarding opacity:

I do not want to inherit the child opacity from the parent in CSS

The long story short, I have tried quite a few things now in trying to get this image to be centered vertically, but to no avail.

Keep in mind, this solution needs to work with any image!

I am certainly capable of adding a line of code to the $(window).resize() function to center the image manually, but I would like to avoid doing so, if possible. I'm very curious to learn a way around this, as I seem to run into these types of issues more often that I'd like.

Bonus: Why is vertical alignment so difficult for a browser to perform?

Answer 1

Here is one way centering an image in a fixed/absolute positioned div using CSS.

#fullscreen {
    /* Cover the entire viewport. */
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

#fullscreen img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;

    /* Limit the size of the image. */
    max-width: 80%;
    max-height: 80%;
}

The trick is to use position: absolute for the img and set all the offsets to 0, and then margin: auto will center the image.

The max-width and max-height values will work as expected.

The reason this works is that the image has intrinsic dimensions, so the CSS engine has specific values to do the necessary math to center the images both vertically and horizontally.

See demo at: http://jsfiddle.net/audetwebdesign/KG99S/

Comments

Note that this technique works independently of the overlay.

Also, this works regardless of the aspect ratio of the image.

Reference

This technique follows from the CSS2 specification regarding how the horizontal and vertical margins are determined for absolutely positioned inline, replaced elements.

http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width

and

http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-height