Looking over other question on this site, I used a method of setting all the positions to 0 with auto margins, but this has some unwanted behavior.
If you resize the
window vertically, the top of the container moves off of the top of the page. It needs to stop when it hits the top.
JSFIDDLE: http://jsfiddle.net/jd67ca5y/
HTML:
<div id="container">
<p>This is the container.</p>
<p>If you resize the JSFiddle
window horizontally, you will see that the left edge of the box doesn't move past the left edge of the
window. This is correct behaviour.</p>
<p>Now if you move the
window vertically, the top of this container will disappear off of the top of the
window. This is wrong.</p>
</div>
CSS:
#container {
margin:auto;
height:300px;
width:300px;
top:0;
bottom:0;
left:0;
right:0;
position:absolute;
border:1px solid;
padding:10px;
}
