Centering a Div

The first thing you should know about a "div", is that a div is a block-element.
That means, that a div usually takes 100% of available width.

for example:



takes 100% of available width, as you can see here:



You can set your divs to a fixed width, for example:



This looks like:



How to center a div element with fixed width isn't a miracle:
Simple set its left- and rightmargin to "auto":





Note:
Internet Explorer doesn't know this in some doc types. As you can see, my page uses the doc type "XHTML 1.0" - where the IE seems to understand, what he should do.

If you can't change the doc type of your website (or maybe older IE's still don't know how to handle this) you can put another div around your div, which has the "text-align:center" attribute.





I've Included this example as an screenshot, because with my doc type, IE doesn't handle this as well.

The Save Way

There is a way, to get your div centered in (as far as i know) every ৺browser:
Use a absolute position an set a negative margin:



The idea is simple: Put your div absolute on the screen, with a distance from left of half the page.
Then, if your div is f.e. 200 pixels in width, you need to set a left margin of - 100 px.

Relative Divs?

Centering a relative div is easy too: Just set up a left-margin of "half of the rest":



looks like:



Another Workaround

Usually there are the two situations: div is at 100% width, or you know the width.
But sometimes, you want to center a div, that is at "unknown" width.

for example: My page includes pictures within a div container, to get a border and a comment bellow.
By default i like those containers to be centered, so i used the "margin:0 auto"-version, explained above.

While including the picture, the width and height is getting recalculated by the script. If i'd like to have my pictures aligned left by default, theres a problem: While parsing the img-tag, the script doesn't know (without modification of the source) if the picture should be aligned left, centered or right.

In this case, you can use the deprecated tag "center" to get your div centered:

(for demonstration i use the div width of 100px)



this looks like:

I'm div

৺dog.net Development doesn't recommend the usage of deprecated tags. But i think it's worth to be mentioned