Box per Css  mittig auf der Seite zentrieren: 

Die Anweisungen liegen in einem externen Stylesheet dafür wird zwischen die Headtags  der Aufruf für die "Style.css" notiert:

Beispeil:

<HEAD>
<TITLE>mittige Ausrichtung</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="http://www.mittig.css">
</HEAD>
 

Der Code für die Htmlseite wäre folgender, und wird zwischen den Bodytags notiert

Beispiel:

<BODY>
<DIV ID="contentcenter">hier steht der Seiteninhalt</DIV>
</BODY>
 

die dazu gehörige "Css Anweisung" sähe so aus und steht in einer externen Datei hier: mittig.css
Ausgehend von einer Bildschirmauflösung von 1024 x 768 Pixel hier der Inhalt in einer Box von 800 x 600 Pixel.
Damit hätte man beide Bildschirmauflösungen bedient. Je nach Gusto kann man die Größe der Inhaltsbox verädern.

Der Startpunkt der Box liegt genau in der Mitte, wenn ich die absolute Position jeweils mit 50% angebe. Durch margin left/top wird der Abstand zur Mitte jeweils um die Hälfte der späteren Größe verschoben. Das Minus bewirkt eine Verschiebung nach links und die Box oder das Div erscheinen relativ zur Bildschirmanzeige in der Mitte.

 

/*Definition der gesamten Inhaltsumgebung */
 

#contentcenter {

width: 800px;    /*Größe der Seite */
height: 600px;

position: absolute;
left: 50%;
position: absolute; top: 50%;
margin-left: -400px;
margin-top: -300px;



border: 1px solid #fff;
background-color: #333 }

Beispiel ansehen

zurück