Firefox Logo

How to center an HTML page with CSS


Ok... Here is one of the most frustrating things ever. HOW TO CENTER AN HTML PAGE WITH CSS! I use to do this by wrapping the page inside a div and centering that div. It works and it's solid but if you want to use a true CSS method, check this out.


Share

FRIST!
This will only work if the DOCTYPE is XHTML Transitional or Strict. IT WILL NOT WORK if your doctype is HTML 4.x. Here is an example of what it should look like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

NEXT!
Put this at the top of your CSS file and you will be good to go!

#html, body {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  width:980px;
  height: 100%;
  margin: auto;
}

** Again this works in ALL BROWSERS including IE6. If you want it to see it in action, just GO TO THIS SITE using different browsers. Cheers!