css - ポップアップを画面中央に表示させるには?

Question

リンクをクリックすると、ポップアップが表示されます。問題は、画面の中央に配置されていないことです。ところで、私のコードは、Web サイト (およびポップアップ) がモバイル版で完全に見えるようにするのにも役立ちます。

HTML コード:

<a href="#" data-reveal-id="exampleModal">POP UP</a>

<div id="exampleModal" class="reveal-modal">
     <h2>POP UP</h2>
     <p>
     <font size="4">window window window.window window window. window.
         </font>
    </p>
    <a class="close-reveal-modal">×</a>
</div>

CSS コード:

 .reveal-modal     
  {
        background:#e1e1e1; 
        visibility:hidden;
        display:none;
        top:100px; 
        left:50%; 
        width:820px; 
        position:absolute; 
        z-index:41;
        padding:30px; 
        -webkit-box-shadow:0 0 10px rgba(0,0,0,0.4);
        -moz-box-shadow:0 0 10px rgba(0,0,0,0.4); 
        box-shadow:0 0 10px rgba(0,0,0,0.4)
  }

right:50% も入れてみましたが、うまくいきませんでした。仕事を辞めるべきではない？