Como centralizar uma página web

A imagem abaixo mostra as dicas para centralizar um documento na web.

centralizar_novo

 

O código respectivo do html e css estão abaixo.

A parte do HTML

<!DOCTYPE html>
<html>
   <head>
   <!-- insira aqui os elementos do head -->
   </head>
   <body>
      <section id="principal">
       <!-- insira aqui os conteúdos da páginas a serem centralizados -->
      </section>
   </body>
</html>

A parte do CSS

@charset "UTF-8"
/* CSS Document /*
#principal {
      width: 960px;
      margin: 0 auto;
    }

Clique também para baixar os arquivos de exemplo.