CODEWITHSUNDEEP
jquerycss
santa
santa

Reputation: 12512

Position div in the middle of the screen w/jQuery

I need to add an overlay box in the middle of the screen. I must remain there until I remove it. I should remain in the middle even when the page is scrolled. My guess I need a relative positioning but how do I get the margins etc. Do I need to use jQuery to calculate it?

$(".myBox").css("margin-top", $(document).height()/2 - $(".myBox").height()/2);

Upvotes: 1

Views: 946

Answers (2)

wosis
wosis

Reputation: 1219

What you are looking for is position:fixed (not supported by IE<7). https://developer.mozilla.org/en/CSS/position for meeting this requirement: "It should remain in the middle even when the page is scrolled." 

$(".myBox").css("top", $(document).height()/2 - $(".myBox").height()/2);
$(".myBox").css("position", "fixed");

Upvotes: 0

Liv
Liv

Reputation: 6124

If you have a width and height specified for your div then you can use (CSS code):

 margin-left: auto;
 margin-top: auto;

or if you want to do this in jQuery:

$(".myBox").css("margin-top", "auto");
$(".myBox").css("margin-left", "auto");

This should be supported by IE as well as Firefox, Opera, Safari etc.

Upvotes: 1

Related Questions