Come centrare sia in orizzontale che in verticale un div

Inauguro il mio blog con un tip di CSS: come si fa per posizionare un div al centro della pagina?
Tutti conoscono la metodologia basata su tabelle al 100% con i contenuti centrati al loro interno.
Ma come si fa per centrare un contenuto usando una struttura a soli div?

Ovviamente non essendo un metodo standard IE e Firefox si comporano in maniera differente.
Iniziamo da Firefox:

  *>div.centered {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 250px;
  height: 150px;
  margin: auto;
}

In pratica si tratta di posizionare il div dandogli tutti i margini ad “auto” e dimensionando il div da centrare in maniera assoluta.

Invece con IE si deve usare un’approccio differente:
bisogna posizionare il div al centro della pagina (con top e left a 50%) e poi dargli un margine negativo di metà della dimensione del div.

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -75px;
  margin-left: -120px;
}

Combinando entrambi gli snippet (attenzione, prima mettete nel foglio di stile il pezzo per IE e poi quello per Firefox) si ottiene una pagina con un contenuto centrato.