73

I want to set something in the middle of the screen

thanks

Ian Nelson
  • 57,123
  • 20
  • 76
  • 103
zjm1126
  • 63,397
  • 81
  • 173
  • 221

3 Answers3

175
$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document

As documented here: http://api.jquery.com/height/

Dustin Laine
  • 37,935
  • 10
  • 86
  • 125
  • 28
    Honestly, this does not answer OP's question. If you are looking for the _actual_ screen height, use `screen.height` like `var height = screen.height`. This might look like a bug bite, but OP asked how to position something in the middle of the screen, not the middle of the browser window. – John Weisz Oct 11 '14 at 11:49
  • Perfect John White, just what I needed, screen.height worked for me – Bogdan T Stancu Mar 21 '16 at 16:03
  • John's answer should be the most upvoted answer. – Erwan Clügairtz Oct 02 '19 at 12:31
5

use with responsive website (view in mobile or ipad)

jQuery(window).height();   // return height of browser viewport
jQuery(window).width();    // return width of browser viewport

rarely use

jQuery(document).height(); // return height of HTML document
jQuery(document).width();  // return width of HTML document
Piseth Sok
  • 1,789
  • 1
  • 20
  • 24
2
$(window).height();

To set anything in the middle you can use CSS.

<style>
#divCentre 
{ 
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 400px;
    margin-left: -150px;
    margin-top: -200px;
}
</style>
<div id="divCentre">I am at the centre</div>
rahul
  • 184,426
  • 49
  • 232
  • 263
  • That CSS will put the top left corner of the div in the middle of the page. The div will then extend right and down, looking *seriously* off-center. Maybe make the margins negative? Because that seems like it might work, but only if the thing you're centering is smaller than the page. – T.J. Crowder Mar 09 '10 at 07:18
  • Fixed the typo. Thanks @ T J Crowder – rahul Mar 09 '10 at 07:24
  • Your vertical centering approach requires that you know the height of your #divCentre element. – Dustin Laine Mar 09 '10 at 07:28