This content will be centered in the browser window (or more accurately, the viewport).
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Centered Layout</title>
<style type="text/css">
html {
background-color:#630; /* brown */
}
body {
background-color:#ABD4E9; /* dusty blue */
margin:0 auto; /* THIS IS THE MAGIC */
width:75%; /* AND THIS IS THE MAGIC */
max-width:800px;
padding:0 2em;
}
header {
padding:1.5em 0;
background-color:#E3D4B4; /* tan */
margin:0 -2em;
}
footer {
padding:0.5em 15px;
background-color:#E3D4B4; /* tan */
margin:0 -2em;
}
</style>
</head>
<body>
<header>
<h1 style="margin:0; text-align:center">Centered Layout Example</h1>
</header>
<p>This content will be centered in the browser window (or more accurately, the viewport).</p>
<footer>
<p style="font-size:smaller;">2013—All rights reserved. Pixel Pro, Inc.</p>
</footer>
</body>
</html>