Question

If I wanted to create a web page with content about the size of a post card, how would I go about positioning it on the screen?

Horizontally isn’t an issue (margins auto); however, centering it vertically is a an issue.

What’s the best way of centering the container vertically? Javascript? Should I even be trying to center it vertically, or would you in general prefer a page to start near the top?

Thanks!

Answer 1

You can do this with CSS. Center a container DIV using 50% left and top. Then simply offset your contained postcard 50% of its width & height back.

<div id='postcard_container'>     <div id='postcard'>     Postcard here     </div> </div>  #postcard_container {     position:absolute;     display:block;     width:1px;     height:1px;     left:50%;     top:50%; } #postcard {     position:absolute;     width:800px;     height:600px;     left:-400px;     top:-300px; }