Hallo,
es ist ein weit verbreitetes problem den Inhalt einer Website komplett zu zentrieren, sowohl vertikal, als auch horizontal.
In diesem Tutorial werde ich versuchen dieses Problem zu lösen!
Ich gehe anfangs mal davon aus, dass man die höhe, sowie breite des inhaltes kennt, der zentriert werden soll. Dies kann zum Beispiel ein div-element oder eine tabelle sein, auf jeden fall aber ein block-element.
Der CSS-Code sieht folgender maßen aus:
#center {
width: 400px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;}
Die Erklärung:
Ich denke height und width ist klar.
position: absolute bedeutet, dass die positionierung im bezug zum eltern-element, in diesem fall das browserfenster(oder auch body) gesetzt wird.
top: 50% : der obere rand des inhaltes beginnt bei 50% des browserfensters
left: 50% : der linke rand des browserfensters beginnt bei 50% des browserfensters
jetzt ist unser inhalt aber noch nicht mittig, denn er beginnt ja jeweils nur auf der hälfte, soll aber zentral drauf sitzen! dafür sind die nächsten befehle
margin-top: -100px: verschiebt den inhalt um 100 pixel nach oben
margin-left: -200px: verschiebt den inhalt um 200 pixel nach links
jetzt ist unser inhalt total zentriert, der html-teil würde dann so aussehen:
<body>
<div id="center">--INHALT--</div>
</body>
Jetzt ist höhe und breite aber nich immer 200 pixel und 400px, also werde ich hier nochmal die berechnung hinschreiben:
#center {
width: X;
height: Y;
position: absolute;
top: 50%;
left: 50%;
margin-top: -(0.5*Y);
margin-left: -(0.5*X);}
Ein Beispiel könnt ihr unter: http://striker21.xardas.lima-city.de/center.html sehen. Ihr könnt jetzt das Browserfenster vergrößern und verkleinern, wie ihr wollt und das kästchen wird immer in der mitte sein!
Ich hoffe ich konnte euch helfen
mfg Striker