div position center of screen

An age old question with a simple answer:
How to position a div in the center of (any size) browser window?

Once you have created your html page, create the div you wish to have in the center of the window and give it an id:

<div id="container">
  My center div...
</div>

From here on we have two options: either CSS or Javascript (using JQuery) :

The CSS solution:

We are going to give it a background color for display purposes, and a size of 100px by 100px.

#container {
  width: 100px;
  height: 100px;
  background-color: #567;
}

And lastly the trick:
We position the div absolute to the browser window, 50% from the top and 50% from the left.
Example of div positioned 50% from top and 50% from the left
But now the top left corner is in the center of the browser window, so to fix this we apply a negative margin of half the div size (50px in this case) to both left and top, leaving the center of the div in the center of the browser window.
Example of div with negative margin of half its width and half its height

Here is the final css:

#container {
  width: 100px;
  height: 100px;
  background-color: #567;
  
  position:absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
}

The javascript (using JQuery) solution:

With JQuery we have an advantage in that we can use calculations to determine the offset from the top left corner of the browser window.
We use the $(window).resize() function so that if they resize their screen the event will trigger and the div will auto position again.
We use outerWidth() and outerHeight() to get the width and height of the div including its border and padding.
Here is the final script:

$(window).resize(function(){
  $('#container').css({
    position:'absolute',
    left: ($(window).width() - $('#container').outerWidth())/2,
    top: ($(window).height() - $('#container').outerHeight())/2
  });
});

// To initially run the function:
$(window).resize();

Pros and cons of the two methods

CSS:
With css we need to know the size of the div beforehand to position it, but a browser with javascript disabled can still view it correctly.
Javascript:
With javascript we don’t have to know or calculate the size of the div beforehand, but then the implementation is dependant on having javascript enabled.

21 Responses to “div position center of screen”

  1. Bart says:

    Thanks! That helped me a lot. Cheerz ;)

  2. Andrey says:

    Yep. But will not work on dynamic width div.

  3. Nico says:

    @Andrey – did you read the whole post? The first solution is the non-javascript solution, using css, and yes, in that solution you have to know the width beforehand. But the second solution is a Javascript solution which will work on any width. If you resize the div dynamically with javascript after pageload the logic ought to still work, you should just trigger the function.

  4. David says:

    This was really helpful. Thanks.

  5. Kishore says:

    This has really helped me.. Thanks!

  6. Lamer says:

    Both are excellent solutions, thanks. But I cannot help but think the guys who create these standards (HMTL, CSS) should have created a command or something like “centerscreen” or “centerwindow” a long time ago, I mean it´s such an ELEMENTARY need for any webdesigner and there´s no simple command to make it happen, hence we have to be here asking for help.

  7. Crimo says:

    Hello, the CSS version works perfectly, but I couldnt make the Jquery version to work, do you have like an html example? thank you ?=

  8. dhamaso says:

    thank you very much, This trick helped me a lot.

  9. Schurik says:

    Very good! Thanx!
    Especially the jQuery part was a big help!

  10. muk says:

    thanks! very helpful.

    but a little error sneaked into your script…as you explained above, the div should be positioned at width/2 and height/2 and then -container.width/2 and container.height/2.

    your snippet sums the widths and then divides – and the div is ending up not exactly in the middle of the screen.

    not a problem width small divs, but one will see it when using bigger divs.

    it should rather be like:

    $(window).resize(function(){
    $(‘#container’).css({
    position:’absolute’,
    left: ($(window).width()/2 – $(‘#container’).outerWidth()/2),
    top: ($(window).height()/2 – $(‘#container’).outerHeight()/2)
    });
    });
    // To initially run the function:
    $(window).resize();

    Sorry for bad english (from germany…) and for being such a smarty-pants.

    I really do appreciate people like you, collecting and posting stuff to help people. Thank you.

  11. David says:

    Thanks! This is very helpful, especially a CSS code.

  12. Jimbo says:

    Thank you thank you, holy sht this is annoying! With all the different rez and browers these days this is a mess. Cheers!

  13. Mate says:

    Works for me thanks

  14. thanks so much this works nice

  15. Lee says:

    Thank you!! That was a huge help :)

  16. You can try this function:
    SetWindowCenter = function (control) {
    control.css({
    position: ‘absolute’,
    left: $(window).scrollLeft() + ($(window).width() – control.outerWidth()) / 2,
    top: $(window).scrollTop() + ($(window).height() – control.outerHeight()) / 2
    });
    }

  17. werr says:

    There is a significant problem with the CSS solution. When you center a, say, 300px div at 50% and then give it a negative margin, if you resize the browser window to a smaller than 300px size, the div starts disappearing from the side the margin is.

  18. Luis says:

    Congratulations!!!
    This is the first site that actually solved the problem of centering my page! I am stunned!
    It’s no joke: this is a recurrent question on the net and no other site, with their millions of infallible solutions came close to you guys (that includes some highly estimated forums, such as stack overflow, for instance). I had to leave this comment cause you guys deserved it! many thanks and cheers!

  19. Luis says:

    ps. You are my idols, too!

Leave a Reply