title: How to position the div popup dialog to the center of browser screen?
body: <p>I need to position div popup to the center of browser screen ( no matter what size the screen is). And I want to keep the position as absolute as I don't want to move the popup down when I scroll down the page.</p>
  
  <p>This div is displayed when button is clicked using Jquery.</p>
  
  <p>I tried setting margin-left to half of the width like mentioned in other posts but It isn't working for me.</p>
  
  <p>Here is my code</p>
  
  <p>CSS code:</p>
  
  <pre><code>.holder{        
      width:100%;
      position:absolute;
      left:0;
      top:0px;
      display:block;  
  }
  .popup{
      width:800px;
      margin:0 auto;
      border-radius: 7px;
      background:#6b6a63;
      margin:30px auto 0;
      padding:6px;
  }
  
  .content{
      background:#fff;
      padding: 28px 26px 33px 25px;
  }
  </code></pre>
  
  <p>HTML Code:</p>
  
  <pre><code>  &lt;div class="holder"&gt;
          &lt;div id="popup" class="popup"&gt;            
              &lt;div class="content"&gt;
                          some lengthy text
                       &lt;/div&gt;
          &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>Thanks!!</p>