弹出窗口不在屏幕中心- CSS问题

我已经适应了一些代码，我已经采购显示X秒后弹出。JavaScript的功能似乎很好，问题是，无论我尝试我无法在屏幕中间的中心弹出。

请看这里的弹出窗口:

http://ts564737-container.zoeysite.com/

我已经尝试将弹出框包装在另一个div中，将div设置为width: 100%和position: fixed，然后将弹出框容器设置为margin: 0 auto，没有成功。

我也尝试了各种display和position属性。我所理解的是，弹出式容器没有任何东西的中心，这就是为什么我试图把它包装在另一个div，但我无法使这个工作，因为我希望。

请参阅下面我的代码:

CSS:

#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;
}

HTML:

    <div id="wd1_nlpopup" data-expires="30" data-delay="1">
    <a href="#closepopup" id="wd1_nlpopup_close">X</a>
        <script type="text/javascript" src="https://form.jotformeu.com/jsform/62332622875356"></script>
    </div>

JavaScript:

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 <= 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"&&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<k;n++){var m=r[n].split("=");var h=g(m.shift());var j=g(m.join("="));if(p&&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;};}));

有没有人能告诉我哪里我的CSS出错了?非常感谢任何帮助。感谢您的宝贵时间。

{
    top: 50%;
    transform: translateY(-50%);
    width: 600px; // add a size for your modal
    left: 0;
    right: 0;
}

#wd1_nlpopup {
    display: block;
    position: absolute;
    margin: 0 auto !important;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    left: 0;
    width: 600px;
    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;
}

wd1_nlpopup {
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%, -50%);
  -moz-transform:translate(-50%, -50%);
  -ms-transform:translate(-50%, -50%);
  -o-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
}

#wd1_nlpopup {        
    margin: 10% 38% !important;
    top: 0px !important;}