Autocentrering både vandret og lodret – relativ bredde

Retur til foregående

Nogle webdesignere synes det er smart at placere alt indholdet på en webside præcis midt i browservinduet, og bruger som regel enten frames eller tabeller til at ordne det med.

Det er der nu ingen grund til. Vi kan bruge det samme princip som i centreringseksempel 3 til at centrere #page-elementet på begge ledder:

body {
  margin:0; padding:0;
  font-family:georgia,arial,sans-serif;
  background-color:rgb(245,245,255);
  color:#000; }
#page {
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-20em;
  width:40em;
  height:400px;
  margin-top:-200px;
  overflow:auto;}

Hvis din side har et overordnet element, der omfatter alt indhold på siden, og hvis dette element har en bredde og en absolut position, kan du centrere det vandret ved først rykke det ind på midten (left:50%) og dernæst rykke det til venstre med halvdelen.

Det er sket på denne side ved at omslutte alt indhold på siden med en
<div id="page">...</div>