Skip to content. Skip to navigation

WDIL.org

Personal tools

Already a member? Log in New member? Join

Document Actions

Centering Web Pages With CSS

by dan.danowski — last modified 2006-11-20 13:50

Keywords: css

Edit

A quick "how-to" on centering a fixed width web page using css.

Centering a fixed width web page may prove to be elusive to those first learning to use CSS, but it really is a simple process.

The key is to put a wrapper div element just inside the body tag, but around all other elements on your page.

The HTML:

<html>

    <head>
       <title>My Centered Page</title>
    <head>

    <body>
       <div id="page-wrapper">
          <h1>Centered Content</h1>
          <p>
              The content of this page will be
              centered when CSS is properly applied.
        </p>
       </div>
    </body>

</html>

With the HTML properly constructed, you will need to set the text-align property of the body element to center. Then apply a horizontal margin of auto, and "reset" the text-align back to left. Like so:

The CSS:

body {
    text-align: center;
    }

#page-wrapper {
    width: 750px;
    margin: 0 auto;
    text-align: left;
    }