div Container absolut mittig Positionieren

div Container absolut mittig Positionieren

• WAM
• Tutorials, How to Do
• Dienstag - 23 . November . 2010

Immer wieder stößt man auf Seiten, in der etwas genau in der Mitte, des Bildschirm gezeigt wird. Aber wie geht das? Wie berechnet man genau die Mitte bzw. wie bekommt ein DIV-Container dies berechnet. Eigentlich eine ganz einfache Sache. Sagt doch einfach dem DIV-Container er, soll in der Mitte stehen. Das Funktioniert wie folgt.

Nehmen wir einen Container mit 600 px zu 400px namens center_box. Das dieser „absolute“ positioniert wird ist klar.
[sourcecode language=”css”]
position:absolute;
width:600px;
height:400px;
[/sourcecode]
Er soll in die Mitte. Also weisen wir den Container an er soll mittig stehen.
[sourcecode language=”css”]
Top:50%;
Left:50%;
[/sourcecode]
Upps, sieht komisch aus, wenn der so in die untere Ecke gepappt wird. Nun kommt der kleine Trick an der Sache.

Damit er versteht das er nun ein stück hoch und dann noch zur Seite kommen soll, müsst Ihr etwas rechnen. Und zwar gebt ihr in diesem fall immer die hälfte der höhe und der breite an. Diese setzt Ihr dann in ein Minus (-). Sieht so aus -200px (für die Höhe).

Sollte aber mit den richtigen Anweisungen geschrieben sein.
[sourcecode language=”css”]
margin-left:-300px;
margin-top:-200px;
[/sourcecode]
Wenn ich nun das Ergebnis anschaut, steht der Container, genau in der Mitte.

Noch mal die komplette CSS Anweisung.
[sourcecode language=”css”]
.center_box
{
position:absolute;
width:600px;
height:400px;
left:50%;
top:50%;
margin-left:-300px;
margin-top:-200px;
overflow:auto;
}
[/sourcecode]

• Mediaroo sagt:

  29. November 2010 in 15:14 Antworten

  ansonsten geht auch:
  { margin: 0px auto; }

  Dann wird die Box oben und unten ohne Abstand angezeigt und liegt horizontal zentriert.

  lg