2

I am currently using the jQuery center plugin to center my div element and so far it works to an extend where it does center it to the containing parent container. What I want it to do is to center it to the current browser viewport center. How can that be done?

My setup is a simple link when clicked, a div will pop up like a modal that I want centered into the current browser viewport center.

Cody Gray - on strike
  • 239,200
  • 50
  • 490
  • 574
  • Can you link the Plugin you use. In other way see at http://www.ericmmartin.com/projects/simplemodal/, perhaps it can be does what you want. – Akarun Mar 12 '11 at 10:59

2 Answers2

11

No plug-in is needed. This does the trick:

$('#yourElement').css('display', 'inline-block').wrap('<table style="position:fixed;top:0;left:0;height:100%;width:100%;border-spacing:0;border-collapse:collapse"><tr><td style="vertical-align:middle;text-align:center;padding:0"></td></tr></table>');

Live demo: http://jsfiddle.net/simevidas/EnrLn/1/

Same thing, but without the TABLE element. I use DIV's with display:table and display:table-cell instead:

Live demo: http://jsfiddle.net/simevidas/EnrLn/2/

Šime Vidas
  • 182,163
  • 62
  • 281
  • 385
  • this is interesting but does it have to be a table? Can this not be done with a div? –  Mar 12 '11 at 15:35
  • awesome, that's perfect! thanks for the help...oh one more thing if you don't mind, since this is a popup, is there a way for me to have the window darken and only the popup opaque? –  Mar 12 '11 at 18:35
  • @Rick You can use RGBA to set the background of the outer DIV, but that will not work in IE8 and below. Demo here: [http://jsfiddle.net/simevidas/EnrLn/3/](http://jsfiddle.net/simevidas/EnrLn/3/) Another demo would be my [W3 Viewer](http://www.w3viewer.com) - click on the "About" link in the bottom left corner to see the effect. If you want a solution that works in IE8 also, you will have to use a Microsoft's proprietary filters... – Šime Vidas Mar 12 '11 at 18:47
  • If I have a long window with contents outside the viewport, and I try to center an element, why does the current view jump? This does position an element in the center, but the scrollbar jumps up and the scrollbar changes a bit for some reason. – user961627 Nov 06 '12 at 10:53
  • @user961627 If you're using my solution, that's because the element is removed from the flow. (The element is inserted into a wrapper which is absolutely positioned, which means that the element is no longer in the flow.) I think what you need is the "scrollTo" plug-in. – Šime Vidas Nov 06 '12 at 13:45
2

Use

jQuery( "#element_id" ).css( 'top', parseInt( ( jQuery( window ).height() / 2 ) + jQuery( document ).scrollTop() - jQuery( "#element_id" ).height() ) );
jQuery( "#element_id" ).css( 'left', parseInt( ( jQuery( document ).width() / 2 ) + jQuery( document ).scrollLeft() - jQuery( "#element_id" ).width() ) );
CoolEsh
  • 3,134
  • 1
  • 21
  • 24
  • this seems to work on the vertical center but horizontal center is off to the left...I even changed the code to use outerWidth but no help. –  Mar 12 '11 at 15:20
  • 1
    Off the top of my head, you may need to use `.outerWidth()` and `.outerHeight()` rather than `.width()` and `.height()`. – Ben Blank Mar 12 '11 at 18:12