Centering Elements with CSS

Auto margins

This element has auto left and right margins as well as a width specified which centers it in morern browsers. It will not work if the width is not specified or if this element is floated or (in some browsers) absolutely positioned. When "standards mode" is not in use, this will not work as expected in some browsers.

Example code (you may need more than this):

div.someClass {
  width: 600px;
  margin-left: auto;
  margin-right: auto;
}

IE5 For Windows Needs an Alternative

The equivalent for IE5.x/Win (for anyone still willing to support it) is to give the parent of the element you want to center text-align:center. This compensates for such very old versions of IE incorrectly applying text-align to block-level elements instead of requiring (or supporting) the use of auto left and right margins to achieve this. Often text-align:left is given to the element (and any siblings), so its content is not centered as well. Block-level elements are 100% of the available width by default, so a width does not need to be specified for the parent.

Fixed margins without set width

This element does not have a set width. The left and right margins are set to specified widths instead. The scrollbar can cause this to be slightly off-center. A parent other than the body element, e.g. a wrapper <div>, compensates for that in most browsers.

Example code (you may need more than this):

div.someClass {
  margin-left: 120px;
  margin-right: 120px;
}

Absolute positioning

This element is absolutely positioned 50% from the left side of body. It has a negative left margin of half of its width. In this case, when I say "width" I am referring to the total calculated width of this element. Except in IE's faulty box model, this includes the left and right padding, the left and right borders and the specified width of the element. The auto-margins method is better than this (absolute positioning) method because with this method if the browser window (viewport) is less wide than the width of the element, the element will extend off the left side of the page and no one will be able to scroll to be able to see its content.

Example code (you may need more than this):

div.someClass {
  position: absolute;
  left: 50%;
  width: 600px;
  margin-left: -300px; /* half of the total width */
}

Relative positioning

In this technique, both an element and its parent element both have position:relative set. The parent has left:50% set and the child (inner element) has left:-50% set. It's best to set a width on the parent, but not the child. The child element can have borders, padding, and/or margins defined, however, the parent element can't. Like the technique used in the absolute positioning example, this element might extend off the left side of the page if these elements don't have an ancestor that has a fixed width.

Example code (you may need more than this):

div.someClass {
  position: relative;
  left: 50%;
  width: 600px;
}
div.someClass .inner {
  position: relative;
  left: -50%;
}