title: popup issue - align center
body: <p>I am trying to align my popup at the center of the page.
  whichever image box i click, popup should appear in the center of the page without need to scroll up or down</p>
  
  <p>Please help me to achieve it.
  Test Link Site : <a href="http://www.scs-qa.com/panamera/trading.html" rel="nofollow">http://www.scs-qa.com/panamera/trading.html</a></p>
  
  <pre><code>  .white_content 
    {
  
  -moz-border-radius: 5px 5px 5px 5px;
  background-color: white;
  border: 3px solid #000000;
  display: none;
  height: auto;
  left: 30%;
  overflow: auto;
  padding: 16px;
  position: absolute;
  top: 10%;
  width: 500px;
  z-index: 1002;
  border-radius: 15px 15px 15px 15px;
  text-align: justify;
  font-size: 10pt;
  font-family: 'Tahoma' ;
  </code></pre>
  
  <p>}</p>
  
  <p>HTML</p>
  
  <pre><code> &lt;div class="trading-img-box"&gt;
   &lt;a href = "javascript:void(0)" onclick = "document.getElementById('trading1').style.display='block';document.getElementById('body-below-otherpage-small-trading').style.display='none'"&gt;
   &lt;img class="trading-img" src="img/trading1.png"&gt;
   &lt;/a&gt;
  &lt;h1 class="trading-h1"&gt;Furniture&lt;/h1&gt;
   &lt;p style="height:0; clear:both;" class="trading-p"&gt;It 's pleasant to live spec..&lt;/p&gt;
   &lt;/div&gt;
  
  
  
  
  
  &lt;div id="trading1" class="white_content"&gt;
  &lt;a style="float:right" href = "javascript:void(0)" onclick = "document.getElementById('trading1').style.display='none';document.getElementById('body-below-otherpage-small-trading').style.display='block'"&gt;Close&lt;/a&gt;
  &lt;br/&gt;&lt;br/&gt;
  &lt;img src="img/tradingb1.png" style="margin-top: 5px; margin-left: 25px; margin-right: 5px"&gt;&lt;br/&gt;&lt;br/&gt;
  &lt;strong&gt;Furniture&lt;/strong&gt;
  &lt;p&gt;some text
  &lt;/p&gt;&lt;br/&gt;
  &lt;p&gt;some text
  &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>