For example, if you wanted to lock the iframe over the image, one method would look something like this:
CSS
Code:
div.frame {
width: 759px;
height: 474px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -380px;
margin-top: -237px;
}
CSS Explained
When using absolute position the "auto" setting for margins will not work. Instead I use the left and top values. By using percentages (%) i can be sure the the left and top edges will always be 50% of the browser window width and height (center). Now the only problem here is, I dont want theedges to be in the center, I want the actual center of the div to be in center (so it is truly "centered"). To do this I offset the left and top margins. Remember I only said the "auto" setting will not work, declared values are still fair game. To get the correct value for centering the div/iframe, I will use a negative offset value that is half of the width (margin-left) and another that is half of the height (margin-top). This moves the left and top edges half the distance of the div width and height, in turn centering it in the middle of the window. Whalah!