This box is a <div> tag named #container. It is set to 760 x 490 pixels (for 800 x 600 monitors), has a red border, it's Positioning Type is set to "relative" and it has left and right Margins set to "auto". This ensure's that it centers in any sized browser window.

This box(300 x 200px) is defined by a <div> tag (named #box) nested within the #container <div>.

Positioning is "absolute" with top and left placement of 100px (relative to the #container <div> tag).


Close this page

CSS - centering

This example demonstrates centering a site in a browser window.

The CCS styles for this page are located in the <head> tag of this page, so just view the page source code to see what's going on.

TIP: Try re-sizing the browser window