我正在尝试将我的弹出窗口对齐在页面的中心。无论我单击哪个图像框，弹出窗口都应该出现在页面的中心，而无需向上或向下滚动
请帮助我实现它。测试链接网站：http ://www.scs-qa.com/panamera/trading.html
.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' ;
}
HTML
<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>