Center Javascript pop up to the screen

Question

Hi I have successfully made a popup on the screen the only problem is that it is in the center of the page not the screen.

How can I make it to be on the center of the screen and not centered on the page?

I am on a dual screen but view the page in a single view.

CSS / STYLES FOR CSS POPUP /

    #blanket {
        background-color: #111;
        opacity: 0.60;
        *background: none;
        position: absolute;
        z-index: 9001;
        top: 0px;
        left: 0px;
        width: 100%;
    }

    #popUpDiv {
        position: absolute;
        background-color: #dddddd;
         opacity: 0.90;
        width: 400px;
        height: 300px;
        border: 5px solid #000;
        z-index: 9002;
        border: 2px solid #a1a1a1;
        border-radius: 10px;
        -webkit-box-shadow: 1px 2px 21px 6px rgba(0,0,0,0.75);
        -moz-box-shadow: 1px 2px 21px 6px rgba(0,0,0,0.75);
        box-shadow: 1px 2px 21px 6px rgba(0,0,0,0.75);
    }      
</style>

Javascript

 <script>
     function toggle(div_id) {
         var el = document.getElementById(div_id);
         if (el.style.display == 'none') { el.style.display = 'block'; }
         else { el.style.display = 'none'; }
     }
     function blanket_size(popUpDivVar) {
         if (typeof window.innerWidth != 'undefined') {
             viewportheight = window.innerHeight;
         } else {
             viewportheight = document.documentElement.clientHeight;
         }
         if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
             blanket_height = viewportheight;
         } else {
             if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
                 blanket_height = document.body.parentNode.clientHeight;
             } else {
                 blanket_height = document.body.parentNode.scrollHeight;
             }
         }
         var blanket = document.getElementById('blanket');
         blanket.style.height = blanket_height + 'px';
         var popUpDiv = document.getElementById(popUpDivVar);
         popUpDiv_height = blanket_height / 2 - 200;//200 is half popup's height
         popUpDiv.style.top = popUpDiv_height + 'px';
     }
     function window_pos(popUpDivVar) {
         if (typeof window.innerWidth != 'undefined') {
             viewportwidth = window.innerHeight;
         } else {
             viewportwidth = document.documentElement.clientHeight;
         }
         if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
             window_width = viewportwidth;
         } else {
             if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
                 window_width = document.body.parentNode.clientWidth;
             } else {
                 window_width = document.body.parentNode.scrollWidth;
             }
         }
         var popUpDiv = document.getElementById(popUpDivVar);
         window_width = window_width / 2 - 200;//200 is half popup's width
         popUpDiv.style.left = window_width + 'px';
     }
     function popup(windowname) {
         blanket_size(windowname);
         window_pos(windowname);
         toggle('blanket');
         toggle(windowname);
     }

</script>

Part of HTML

   <div id="popUpDiv" style="display: none;">
                    <div style="float: right; text-align: right;">
                        <div id="Close" style="margin: 5px 5px 0 auto; z-index: 9003!important;">
                            <asp:ImageButton ID="ImageButton1" ImageUrl="~/EmailClient/Trash.png" Width="20px" Height="20px" runat="server" />
                        </div>


                        <center><p style="color:black;z-index: 9003!important; font-size: x-large;"> <b>Price Change</b> </center>
                        <table class="auto-style1000 table_1" style="z-index: 9003!important;">
                            <tr>
                                <td class="auto-style4000">Item:</td>
                                <td style="text-align: left !important;">
                                    <asp:TextBox ID="TextBox6" runat="server" Width="150px"></asp:TextBox>
                                </td>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td class="auto-style4000">Unit Price:</td>
                                <td style="text-align: left !important;">
                                    <asp:TextBox ID="TextBox7" runat="server" Width="150px"></asp:TextBox>
                                </td>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td class="auto-style4000">List Price:</td>
                                <td style="text-align: left !important;">
                                    <asp:TextBox ID="TextBox8" runat="server" Width="150px"></asp:TextBox>
                                </td>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td class="auto-style4000">Markup:</td>
                                <td style="text-align: left !important;">
                                    <asp:TextBox ID="TextBox9" runat="server" Width="150px"></asp:TextBox>
                                </td>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td class="auto-style4000">Margin:</td>
                                <td style="text-align: left !important;">
                                    <asp:TextBox ID="TextBox10" runat="server" Width="150px"></asp:TextBox>
                                </td>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td class="auto-style3000">&nbsp;</td>
                                <td style="text-align: left !important;">
                                    <asp:Button ID="Button3" CssClass="button_1 green" runat="server" Text="Save" Width="104px" />
                                </td>
                                <td>&nbsp;</td>
                            </tr>
                        </table>
                    </div>

                </div>
                <a href="#" onclick="popup('popUpDiv')">Click to Open CSS Pop Up</a>
                <!-- / POPUP-->


                <!-- end #mainContent -->

            </div>

Thanks

Answer 1

#popUpDiv {
  position: fixed;

  width: 400px;
  height: 300px;

  left: 50%;
  top: 50%;

  margin-top: -150px;
  margin-left: -200px;

}

If its a fixed width/height, this should center it.

example: http://codepen.io/ryanjgill/pen/gbPZev

Answer 2

用伪代码：div.style.top =（window.height-div.height）/ 2 + window.scrollTop