title: Popup Not Center of Screen - CSS Issue
body: <p>I've adapted some code that I have sourced which shows a popup after X seconds. The JavaScript functionality seems fine, the issue is that whatever I try I am unable to center the popup in the middle of the screen.</p>
  
  <p>Please see the popup here:</p>
  
  <p><a href="http://ts564737-container.zoeysite.com/" rel="nofollow">http://ts564737-container.zoeysite.com/</a></p>
  
  <p>I have tried wrapping the popup in another <code>div</code>, setting that <code>div</code> to <code>width: 100%</code> and<code>position: fixed</code> then setting the popup container to <code>margin: 0 auto</code>, without success.</p>
  
  <p>I have also tried various <code>display</code> and <code>position</code> properties. What I understand is that the popup container doesn't have anything to be the center of, which is why I tried to wrap it inside another <code>div</code> but I'm unable to make this work as I wish.</p>
  
  <p>Please see my code below:</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#wd1_nlpopup {
      display: none;
      position: absolute;
      margin: 0 auto !important;
      top: 200px !important;
      padding-top: 10px;
    z-index: 9999;
    background: white;
    -webkit-box-shadow: 0 0 20px #000;
    box-shadow: 0 0 20px #000;
    border-radius: 5px;
    border: 5px solid rgba(0, 0, 0, 0.5);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  
  #wd1_nlpopup_close {
      padding-top: 4px;
      padding-bottom: 4px;
      padding-left: 8px;
      padding-right: 8px;
      right: 0;
      top: 0;
      position: absolute;
      background-color: #000000;
      color: #ffffff;
      transition: all 0.2s;
      font-size: 18px;
  }
  
  #wd1_nlpopup_close:hover {
      background-color: #666666;
      transition: all 0.2s;
      color: #ffffff !important;
      text-decoration: none !important;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>    &lt;div id="wd1_nlpopup" data-expires="30" data-delay="1"&gt;
      &lt;a href="#closepopup" id="wd1_nlpopup_close"&gt;X&lt;/a&gt;
          &lt;script type="text/javascript" src="https://form.jotformeu.com/jsform/62332622875356"&gt;&lt;/script&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>jQuery(document).ready(function(jQuery){
      var wd1_nlpopup_expires = jQuery("#wd1_nlpopup").data("expires");
      var wd1_nlpopup_delay = jQuery("#wd1_nlpopup").data("delay") * 1000;
  
      jQuery('#wd1_nlpopup_close').on('click', function(e){
          jQuery.cookie('wd1_nlpopup', 'closed', { expires: wd1_nlpopup_expires, path: '/' });
          jQuery('#wd1_nlpopup,#wd1_nlpopup_overlay').fadeOut(200);
          e.preventDefault();
      });
  
      if(jQuery.cookie('wd1_nlpopup') != 'closed' ){
          setTimeout(wd1_open_nlpopup, wd1_nlpopup_delay);
      }
  
      function wd1_open_nlpopup(){
          var topoffset = jQuery(document).scrollTop(),
              viewportHeight = jQuery(window).height(),
              jQuerypopup = jQuery('#wd1_nlpopup');
          var calculatedOffset = (topoffset + (Math.round(viewportHeight/2))) - (Math.round(jQuerypopup.outerHeight()/2));
  
          if(calculatedOffset &lt;= 40){
              calculatedOffset = 40;
          }
  
          jQuerypopup.css('top', calculatedOffset);
          jQuery('#wd1_nlpopup,#wd1_nlpopup_overlay').fadeIn(500);
      }
  
  });
  
  
  
  /* jQuery Cookie Plugin v1.3.1 */
  (function(a){if(typeof define==="function"&amp;&amp;define.amd){define(["jquery"],a);}else{a(jQuery);}}(function(e){var a=/\+/g;function d(g){return g;}function b(g){return decodeURIComponent(g.replace(a," "));}function f(g){if(g.indexOf('"')===0){g=g.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,"\\");}try{return c.json?JSON.parse(g):g;}catch(h){}}var c=e.cookie=function(p,o,u){if(o!==undefined){u=e.extend({},c.defaults,u);if(typeof u.expires==="number"){var q=u.expires,s=u.expires=new Date();s.setDate(s.getDate()+q);}o=c.json?JSON.stringify(o):String(o);return(document.cookie=[c.raw?p:encodeURIComponent(p),"=",c.raw?o:encodeURIComponent(o),u.expires?"; expires="+u.expires.toUTCString():"",u.path?"; path="+u.path:"",u.domain?"; domain="+u.domain:"",u.secure?"; secure":""].join(""));}var g=c.raw?d:b;var r=document.cookie.split("; ");var v=p?undefined:{};for(var n=0,k=r.length;n&lt;k;n++){var m=r[n].split("=");var h=g(m.shift());var j=g(m.join("="));if(p&amp;&amp;p===h){v=f(j);break;}if(!p){v[h]=f(j);}}return v;};c.defaults={};e.removeCookie=function(h,g){if(e.cookie(h)!==undefined){e.cookie(h,"",e.extend(g,{expires:-1}));return true;}return false;};}));
  </code></pre>
  
  <p>Would anybody please be able to advise on where I'm going wrong with my CSS? Any help is very much appreciated. Thank you for your time.</p>