How to open pop-up in center? - html

Question

I am trying to open my pop up in center.my page have scroll bar .I have write css on that
My pop-up is open a the fixed position but i want to open my pop-up at the center means if i am on botton that time also my pop-up will open in middle.And at time pop up is open but any position.
<div id="editAssessmentFormId:popupIdShow"
style="visibility: hidden; display: none; position: absolute; top: 200px; left: 450px; border: none; overflow-x: auto; width: 350; no-repeat top left; align: center;">
<table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top">
<div>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="left" valign="top" width="5"><img
src="../images/popup_topleft.gif" width="5" height="27" /></td>
<td height="27" align="left" valign="middle" class="bg5">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="96%" align="left" valign="middle"
class="popupTopPanel"><strong>Upload Image</strong></td>
<td width="4%" align="right" valign="middle"><img
src="../images/btn_close.gif" width="19" height="19"
onclick="return closeThePopup();"
onmouseover="this.className='flyOver'"
onmouseout="this.className='flyOut'" /></td>
</tr>
</table>
</td>
<td align="right" valign="top" width="5"><img
src="../images/popup_topright.gif" width="5" height="27" /></td>
</tr>
</table>
</div>
<div
style="background-color: #FFFFFF; border: 1px solid; border-color: #ffffff #7D9BBA #ffffff #7D9BBA;">
<table border="0" cellspacing="0" cellpadding="0" width="90%"
style="margin: 0 0 0 10px;">
<tr>
<td align="center" valign="middle" height="30"><t:inputFileUpload
id="questionFileId" value="#{launchPlayer.fileName}"
onfocus="window.clipboardData.clearData();"
onkeypress="return false;" storage="file" /></td>
</tr>
<tr>
<td align="center" valign="middle" height="30"><t:commandButton
image="../images/btn_submit.gif"
action="#{launchPlayer.uploadImage}"
onclick="return hideThePopup();"></t:commandButton></td>
</tr>
</table>
</div>
<div>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="left" valign="top" width="6"><img
src="../images/bottomleft.gif" width="6" height="8" /></td>
<td align="left" valign="middle" bgcolor="#FFFFFF"
style="border-bottom: 1px solid #7D9BBA;"><img
src="../images/spacer.gif" width="1" height="1" /></td>
<td align="right" valign="top" width="6"><img
src="../images/bottomright.gif" width="6" height="8" /></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
This is my code please correct if i am wrong