How to enlarge image to the center of the page

Hi

i have a image-hover-enlarge used in my website http://kumanworks.110mb.com/Completed/compRAH.htm

i just wondering if anyone can help me on how to properly format so that the enlarged image will enlarge on the center of the page instead of at the current position (refer to the site).

thanks in advance for all the help..

kuman

i have these CSS code to control my thumbnails, hope my code make sense.

.thumbnail
{ float:left;
width:120px;
border:1px solid #999;
margin:0 15px 15px 0;
padding:5px;
font-size:70%;
}

.clearboth {clear:left;}
/* END thumbnail in the page */

/* thumbnail image enlargement */
.thumbnailEnlarge{
position:relative;
z-index:0; 
}

.thumbnailEnlarge:hover{
background-color:transparent;
z-index:1; 
}

.thumbnailEnlarge span{ /* Css for enlarged image */
position:absolute;
background-color:#4D99EE;
padding:5px;
left:50px;
visibility:hidden;
color:black;
text-decoration:none;
}
.thumbnailEnlarge span img{ /* CSS for enlarger image */
border-width:0;
padding:2px;

	border-color: #000;
	width: 290px;			/*Preview image width */
	height: 320px;			 /*Preview image height */
}

.thumbnailEnlarge:hover span { /* CSS for enlarged Image on hover */
visibility:visible;
top:0;
	top: -33px;
	left: -45px;
}

Code (markup):

 

Try changing the CSS so that on hover the image is position absolute, and has a left: 50%; and top: 50%; so it appears in the middle of the screen.