Website horizontaal en verticaal centreren in de browser

Standaard wordt de html van een website van boven naar beneden in de browser geplaatst. Afhankelijk natuurlijk van de marges start de browser bovenaan en gaat zo ver naar onderen door als nodig is. Maar wat doe je als je de ruimte boven en onder de bladspiegel wilt laten afhangen van de hoogte van het browservenster? Hier volgt een oplossing die werkt in IE5, 6 en 7, Firefox, Safari en Opera.

Links/rechts centreren
Het links/rechts centreren binnen het browservenster is makkelijk. Je geeft een width op voor de webbladspiegel (de container-div) en zet de margins hiervan op: 0 auto. De marges boven en onder zijn nul en de margins links en rechts worden automatisch gegenereerd afhankelijk van de breedte van het browservenster.

Centreren binnen de beschikbare vensterhoogte
Dat doe je op de volgende manier. Je container-div omsluit je met 3 div's. Voor de laatste div-afsluiting plaats je een span. In code ziet het er als volgt uit:

‹body›
 ‹div class="wrapper1"›
  ‹div class="wrapper2"›
   ‹div class="wrapper3"›

   ‹div id="container"›
   ...pagina-inhoud...
   ‹/div›

   ‹/div›
  ‹/div›
 ‹/div›
‹/body›

Bijbehorende CSS
De extra div's geef je de volgende eigenschappen mee in het CSS:

.wrapper1 {
display:table;
margin:0px auto;
}

.wrapper2 {
display:table-cell;
vertical-align:middle;
}

.wrapper3 {
background-color:#eee;
border:1px solid #333;
padding: 3px 5px;
}

Het idee is eigenlijk dat je wrapper1 zich laat gedragen als een tabel en wrapper2 als een tabelcel. De inhoud van een tabelcel kun je vertical binnen die cel centreren. Dat is alles!

De werkwijze voor IE8 is wat anders. Daar komt nog een span bij kijken, maar die behandel ik een andere keer. Als voorbereiding daarop is hier wel al een derde wrapper toegevoegd. Deze is voor de andere browsers niet nodig omdat er al een container-div is waar de CSS-eigenschappen aan meegegeven kunnen worden.

Wordt vervolgd!