Question

What is the most compatible method to center (horizontal and vertical) align a <div> on a screen?

I am currently using CSS with:

div.myBlock
{
    position:absolute;

    width:500px;
    left:50%;
    margin-left:-250px;

    height:500px;
    top:50%;
    margin-top:-250px;
}

This works fine in modern browsers, but messes up in older chrome’s/firefox’s etc.

It is for a basic pop-up such as the pop-ups on FaceBook.

Any ideas? Maybe using JS/jQuery can be effective?

Answer 1

i’m using this function to center my stuff’s, have been working so far.

the source is from here, not remember from who.

    // $(element).center();
    jQuery.fn.center = function () 
    {
        this.css("position","absolute");
        this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
        this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
        return this;
    }

edit:

found:

using-jquery-to-center-a-div-on-the-screen