Css 弹出问题-对齐中心

我正在尝试将弹出窗口与页面中心对齐。 无论我点击哪个图像框，弹出窗口都应该出现在页面的中心，而无需向上或向下滚动

请帮我实现它。 测试链接站点：

}

HTML

家具
生活很愉快






家具
一些文本


一些文本

试试这个：

.white_内容{ 左：50%； 左边距：-250px；

---

}

如果需要独立于div大小的解决方案，则需要使用javascript或jquery

  .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' ;

 <div class="trading-img-box">
 <a href = "javascript:void(0)" onclick = "document.getElementById('trading1').style.display='block';document.getElementById('body-below-otherpage-small-trading').style.display='none'">
 <img class="trading-img" src="img/trading1.png">
 </a>
<h1 class="trading-h1">Furniture</h1>
 <p style="height:0; clear:both;" class="trading-p">It 's pleasant to live spec..</p>
 </div>





<div id="trading1" class="white_content">
<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'">Close</a>
<br/><br/>
<img src="img/tradingb1.png" style="margin-top: 5px; margin-left: 25px; margin-right: 5px"><br/><br/>
<strong>Furniture</strong>
<p>some text
</p><br/>
<p>some text
</p>
</div>