Html – How to position a web page in the middle of the screen

csshtml

How can I position a web page in the middle of the screen? like the pages on stackoverflow web site?
I'm writing the masterpage of my website and I want to use HTML and css to position the master page in the middleof the screen and then build the inside positioning block using css. But I can't get my page to be visualized in the middle!

Thank you!

Best Solution

You can use margins to position it in the center horizontally.

Given this html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head></head>
  <body>
    <div id="page"> ... content ... </div>
  </body>
</html>

The CSS can be as simple as:

#page {
  margin-left:auto;
  margin-right:auto;
  width:960px;
}

You also need to make sure you have a valid doctype for this to work.