FRANK'S
TUTORIALS

HOW TO CENTER IN/WITH CSS v. 1.2

Apart from how to center in CSS, this article also explains how to get a centered and fixed menu or header and how to position an element next to a centered element. For vertical centering, see this tutorial.

Centering divs — or rather: elements — with CSS is quite easy, if you know your tools. I assume that you have a basic understanding of HTML and CSS, including doctypes and standards vs. quirks mode. If in doubt, please first go through the first bulleted list of How To Position In CSS.

There are five cross-browser CSS centering methods:

  1. Using margin:auto
  2. Using a combination of position, left and a negative margin-left
  3. Using text-align:center
  4. Using float with certain percentage widths
  5. Using background-position:center

There is a sixth method, which is a combination of float, position, left and a negative margin-left (and sometimes overflow). However, it is a complicated technique for beginners, and only necessary in certain navigation menus. It is therefore only covered on Create a Drop-down/Fly-out Menu with CSS.

1. Using margin:auto

For this type of margin use you need a fixed width of the element, and for Internet Explorer a standards mode-eliciting doctype which may not be preceded by any code whatsoever, not even a comment. You can use margin in two ways. The first is by means of margin:0 auto. However, that sets all margins to 0, also the vertical. That can give unwanted results. Also because margin:0 auto and margin:auto are not always rendered cross-browser, it is best to declare all margins and set the left and right to auto. You can declare actual right and left margins (keeping other elements at a distance), and still set them to auto so that the element centers:


    width: 100px;
    margin-top: 0;
    margin-bottom: 1em;
    margin-left: 100px auto;
    margin-right: 100px auto;

Note that margin:auto does not go together with position:absolute or :fixed (see later).

2. Using a combination of position, left and a negative margin-left

That combination looks as follows:


    width: 500px;
    position: absolute; /* or :relative or :fixed */
    left: 50%; /* = of the parent element or body */
    margin-left: -250px; /* half the width */

Do note that for IE6 to render fixed at all, a tweak such as this Javascript is necessary. Also, if a parent element has a position other than static declared, a child with a position:absolute will be positioned relative to the parent element. For more information on this, see How to Position in CSS. Elements with a position:relative are always positioned relative to the parent element.

3. Using text-align:center

With text-align:center you can do two things. The first is center text lines within text block elements such as <p>, <h1> through <h6> and <li>. It is important to note that it is not the text block element itself that is centered, but the text lines within. Because the text-align property is inherited, you can declare it for the text block element or for its parent block element.

The second thing we can do with it is center inline elements within block elements, such as an image in a div. For that, you need to declare it for the parent element.

4. Using float with certain percentage widths

The code simply looks like this (I am using inline style to keep this article as simple as possible):


    <div style="width: 20%; float: left;"></div>
    <div style="width: 60%; float: left;"></div>
    <div style="width: 20%; float: left;"></div>
    <div style="clear: left;">

Do note that when adding padding and border to the divs, the percentages must be adjusted.

5. Using background-position:center

As the term suggests, with background-position:center you can center the background image of an element. The syntax is as follows: background-position: [horizontal value] [vertical value];. The values can be left, center, right (horizontal) and top, center, bottom (vertical). For both values relative and absolute measures (percentages, ems, pixels, etc.) can be used as well.

How to Get a Centered
and Fixed Menu or Header

That can be achieved in two ways, also. One way is with nested position:fixed, which goes like this:


HTML:
    <div id="centeringDiv">
        <div id="fixatingDiv"></div>
    </div>

CSS:
    #centeringDiv {
        width: 600px;
        height: 100px;
        margin-left: 0 auto;
        margin-right: 0 auto;
        background: yellow;
    }
    #fixatingDiv {
        width: 600px;
        height: 100px;
        position: fixed;
        background: blue;
    }

The other way is with position:fixed with a negative margin:


HTML:
    <div id="centering+fixatingDiv"></div>

CSS:
    #centering+fixatingDiv {
        width: 600px;
        height: 100px;
        position: fixed;
        left: 50%;  /* = of the parent element or body */
        margin-left: -300px;  /* —half the width */
        background: yellow;

Do note that for IE6 to render position:fixed at all, a tweak such as this Javascript is necessary.

How to Position a Div
Next to a Centered Div

That can be done in two ways. One way is with nested position:absolute, like so:


HTML:
    <div id="mainDiv">
        <div id="sideDiv"></div>
    </div>

CSS:
    #mainDiv {
        width: 600px;
        height: 600px;
        margin: auto;
        position: relative;
        background: yellow;
    }
    #sideDiv {
        width: 50px;
        height: 100px;
        position: absolute;
        left: 600px;  /* width of the parent */
        top: 0;  /* necessary for some browsers */
        background: blue;
    }

or like so:


HTML:
    <div id="mainDiv">
        <div id="sideDiv"></div>
    </div>

CSS:
    #mainDiv {
        width: 600px;
        height: 600px;
        position: absolute; /* can also be :fixed */
        left: 50%;
        margin-left: -300px;
        background: yellow;
    }
    #sideDiv {
        width: 50px;
        height: 100px;
        position: absolute;
        left: 600px;  /* width of the parent */
        top: 0;  /* necessary for some browsers */
        background: blue;
    }

The other method is with non-nested position:absolute or :fixed with certain margins, like so:


HTML:
    <div id="mainDiv"></div>
    <div id="sideDiv"></div>

CSS:
    #mainDiv {
        width: 600px;
        height: 600px;
        position: absolute;
        left: 50%;
        margin-left: -300px;  /* half the width */
        background: yellow;
    }
    #sideDiv {
        width: 50px;
        height: 100px;
        position: absolute;
        left: 50%;
        margin-left: 300px;  /* half the mainDiv's width */
        background: blue;
    }

Elements with a position:absolute are taken out of the flow but keep their high z-index, so the next elements could be positioned behind the mainDiv and sideDiv.


Change log
V. 1.1: added background-position:center; re-formatted CSS code snippets in the text.
V. 1.2: rephrased method #2 and gave it a different title.


About
I am Frank Conijn, a web designer and author from Amsterdam, the Netherlands. At the moment, I am too busy with other web projects to be making websites for others, but I am available if you want to hire me for problem solving or advice. Just mail me at f.conijn@conijnbotFoolconsultancy.com.

Was this article helpful and do you have any Google account? A Google recommendation of my business, by means of simply clicking this button, is appreciated:

For general comments on and suggestions for this article, mail met at the above address. For free help with minor problems, post your question on one of these web design forums (pop-up).