Always center div in the middle of screen
<p>My object is to have popup appear on the center of screen. Everything works fine with default zoom on PC and tablets with "Matt Coughlin" <a href="http://stackoverflow.com/questions/11364959/how-to-center-getting-data-on-mobile-screen?answertab=active#tab-top">answer</a>, but things starts to break when zooming in. </p>

<p>Popup div jumps out of the screen most of the times and therefore is unusable on smaller devices.</p>

<p>I have tried to find a way for a while now and nothing really works. Is there even a way to get center of a screen, not page? </p>

<p>Basically when you press open popup, it aligns center of the area. If you scroll it a bit right and repress open popup, then result is the same, but while zooming in mobile devices, then it won't work anymore. Code example, which aligns popup in the middle of screen (el is the popup element)</p>

<pre><code>var pos = document.body.getBoundingClientRect();
var left = ((window.innerWidth &gt;&gt; 1) - pos.left) - (el.width() &gt;&gt; 1);
var top = ((window.innerHeight &gt;&gt; 1) - pos.top) - (el.height() &gt;&gt; 1);
</code></pre>

<p><a href="http://jsfiddle.net/ceujq/3/" rel="nofollow">JSFIDDLE EXAMPLE</a></p>
