跨浏览器：如何根据视口高度调整元素的垂直位置？

Question

I've got a dock of icons that I would like vertically centered. This of course would vary, based on screen resolution, etc. What I've currently done, is got the height of a parent DIV, which is sized at 100% of the viewport:

    var pageHeight = $('#sidebar').height();

Then, I get the height of the icon container, as this is not predetermined in CSS:

    var socialDockHeight = (document.getElementById('social_dock_container').offsetHeight * numberOfIcons);

Note: this only retrieves the height of one icon, for some reason, perhaps because they are coded in an array? I then calculate the new position, and assign it to the element, via jQuery:

    var y = (pageHeight / 2) - (socialDockHeight / 2);
    $("#social_dock_container").css({ 
            top: y + "px"
    }).show();

This works great in Chrome, but not IE, FF, or Safari.

Answer 1

You want to have your icons always beeing positioned in the middle of the screen? If your Icons are not that big, why not do:

#social_dock_container
{
    position: absolute;
    top: 50%;
}

EDIT

As Zee Tee mentioned, of course you need to set margin-top as followed:

$("#social_dock_container").css('margin-top', '-' + socialDockHeight / 2 + 'px' );

Answer 2

If you're not going to use $(window).height() , then use $('#sidebar').outerHeight(); , so you get all the other good stuff like paddings and margins on the element.

Also don't forget about when a user resizes their window. Use .resize(); for that.