HTML Template mit div container mittig

Hallo zusammen,

ich habe folgendes Problem: ich möchte meinen Seiteninhalt in der Bildschirmmitte haben. Jetzt habe ich ein html-template erstellt, aber ich bekomme den div Container den ich angelegt habe einfach nicht so hin, dass er in der Mitte ist :x
Der Code sieht folgendermaßen aus:

<div style="position:relative; margin-top:auto; margin-left:auto; width:800px; height:550px; border:2px solid black; background:#fff" id="container">
<div style="position:absolute; top:15px; left:15px; height:150px; font-family:arial; font-size:20pt; font-weight:bold;">XX Gruppe</div>
<div style="position:absolute; top:50px; left:15px; height:150px; font-family:arial; font-size:10pt;">Sport macht fit</div>
<img style="position:absolute; top:15px; left:200px; width:180px;" src="gfx/halle.jpg" alt="halle" />
</div>

Also außenrum ist halt noch der <body> und das übliche html zeugs. Der Container div soll nun in der Mitte zentriert sein und die restlichen divs und imgs (es kommen noch mehr dazu) sollen sich am Container orientieren, das klappt auch, aber der Container an sich geht nicht in die Mitte.

Ich hoffe ihr könnt mir helfen, ich seh den Fehler einfach nicht... #angry#

Vielen Dank

Also ganz einfach, aber sicher nicht ganz richtig wäre:

<div align="center"></div>

Damit alle adnderen Divs umschließen, oder

besser:
etwas wie

div#zentrieren { width: Deine Breite der Seite; margin: 0px auto; ... }

So vielen Dank für den Tip, das schein schonmal so in der Richtung zu funktionieren. Was ich jetzt noch gerne hätte, ist dass es auch vertikal zentriert ist, aber ein valign funktioniert ja nicht... 🙁

tobstar schrieb

Was ich jetzt noch gerne hätte, ist dass es auch vertikal zentriert ist, aber ein valign funktioniert ja nicht... 🙁

Das ganze ist dann nur noch eine CSS Sache und erfährst du am besten wo anders, zB bei google
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html u.v.m

lg georg

Vielen Dank an alle, die mir mit ihren Tips geholfen haben.
Falls mal jemand ein ähnliches Problem hat, ich habe es jetzt so gelöst.
Der <div> Tag der alles einklammert, muss so aussehen:

<div style="position:absolute; top:50%; left:50%; margin-top:-275px; margin-left:-400px; width:800px; height:550px; border:2px solid black; background:#fff" id="container">

Wobei zu beachten ist, dass die margin Werte jeweils die negative Hälfte der Höhe bzw Breite ist. 8-)