Centering elements on a CSS website

Horizontal centering

To horizontally center an element (block, tag or a whole website) using CSS, you only need to specify a width to the element and automatic width to lateral margins.

Our container block (div) is given and id "global":

#global {
     margin-left: auto;
     margin-right: auto;
     width: ...; /* mandatory to be centered */
     }

Note : /* these texts are explanation comments and can be removed at will*/

This way our element will automatically equilibrate the lateral margins.

Place your container block (div for example) into the HTML code:

<div id="global"></div>

Then place the rest of your website within this container and your website pages will be perfectly centered.

Very simple, heh? The only problem is that only the last version of Internet Explorer (IE6) understands this syntax and for older versions you need to "cheat".

For this to work under Internet Explorer, you will need to align the text so that it is centered within the body (Internet Explorer does not recognize this property very well and uses it to align everything: the text but also the images and all the elements in general).

So:

body {
     margin: 0; /* to avoid margins */
     text-align: center; /* to correct the centering IE bug*/
     }

You will then need to realign your text within the container, which is:

#global {
     margin-left: auto;
     margin-right: auto;
     width: ...;
     text-align: left; /* to realign your text */
     }

Don't foget to define a width for the container, if you do forget, it won't be centered. Attention: this method for automatic margins will not center a whole block if it is positioned as absolute (see technique for negative margins for these blocks).

Case of positioned elements

For sites with positioned internal elements in "position: absolute" or "position: fixed", the lateral margins technique does not work by default.

If your container is placed within the flux (with margins) and your content is positioned (absolute or fixed), then it will get out of the flux and of the container. The content will then position itself according to the latest positioning parent: the document.

To avoid this, you need the container to be positioned. Give it a relative position so you will be able to keep it centered with automatic margins, and you will also be able to incorporate content that will also be positioned.
Note: You can also use the solution of negative margins (see following chapter).

Example of a container created for a content with positioned elements:

#global {
     position: relative; /* container positioning */
     margin-left: auto;
     margin-right: auto;
     width: ...;
     text-align: left;
     }

There you go for horizontal centering

Vertical centering

It is otherwise complicated for vertical centering!

There is a vertical-align attribute, but it doesn not allow:

This attribute was not made for this but to generally align two elements one with the other. It is only within cells of a table that this property aligns all the content vertically.

Again, it is possible to "cheat" by making believe that the container is a table (in this case the vertical-align attribute works) by declaring the block display: table-cell.

But then again, Internet explorer does not recognize "table-cell". So we need to use another technique:

Negative margins

The negative margins technique allows to center a block for which the dimensions are known.

Centering can be horizontal, vertical or both.

For a container block of 700 px by 400 px. We want it exactly centered within the navigator no matter the definition used (800x600, 1024x768 or more).

The trick is to first place this block at 50% top and 50% left, which will place the upper left corner of the block in the middle of the page.

Then we will define negative margins with a value that is exactly half of the width and height of the block, which will position it exactly in the middle of the page.

Here is the CSS code for the container:

#global {
     position:absolute;
     left: 50%; 
     top: 50%;
     width: 700px;
     height: 400px;
     margin-top: -200px; /* half of the height */
     margin-left: -350px; /* half of the width */
     border: 1px solid #000;
     }

Then place the container right below the <body> tag:

<div id="global"></div>

Now the block is centered.(View result here)

Note: Negative vertical margins in CSS seem to be causing problems on Explorer / Mac.

(Liberally inspired from http://bluerobot.com/web/css/center2.html)

Print article

Raphael GOETTER
www.alsacreations.com