Center container horizontally and vertically
- by Joey
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;
}
