Div - Container vertikal zentrieren

[majo]

Hallo!

Ich möchte gerne einen Div vertikal (?) zentrieren, also dass er nach oben/unten den gleichen Abstand hat. Wer weiß eine Lösung ? ;)

 

[Witschi262]

Ich weiß soganz jetzt nciht was du meinst.

 

[vitus37]

In CSS mit:

div{
  margin: auto 0;
}

 

[prm]

Horizontale und vertikale Zentrierung mit CSS

 

[hokage555]

Ich nehme an du möchtest einen Div Container innerhalb eines Div Containers vertikal zentrieren, richtig?

Das würde dann so aussehen:

HTML:

<div class="aussen">
   <div class="innen">
   </div>
</div>

CSS:

div.aussen{
    display: table-cell;
    vertical-align: middle;
    width:700px;
    height:700px;
    border:1px solid #F00;
}

div.innen{
    width:500px;
    margin:0 auto;
    border:1px solid #30F;
}

Das Wesentliche sind die ersten 4 CSS Codezeilen des äußeren Divs. Breiten, etc. kann man dann ja noch anpassen. Ich habe das ganze auch noch horizontal zentriert.

grüße hokage

 

[hokage555]

Horizontale und vertikale Zentrierung mit CSS

Warum sollte er denn bitte absolut positionieren und mit negativen margin Werten arbeiten? Weil die display:table-cell; Eigenschaft im IE7 und kleiner nicht interpretiert wird?
Denn abgesehen davon ist meine Methode deutlich eleganter ;-)

 

[prm]

Weil display: table-cell in älteren IE-Versionen nicht funktioniert.
Wenn man bei der vertikalen Zentrierung die beschriebene Variante 2 verwendet bedarf es keiner absoluten Positionierung mit ihren bekannten Nachteilen und der Nachteil von display: table-cell wird damit auch übergangen.

 

[majo]

Horizontale und vertikale Zentrierung mit CSS

danke, mit der 2ten Variante funktioniert das bestens.

 

[Efchen]

Leider funktioniert die vertikale Zentrierung mit absoluter Positionierung nur, wenn der Viewport groß genug ist, den Inhalt aufzunehmen. Sonst verschwindet der Inhalt nämlich oben raus, wo ihn kein Scrollbalken mehr kriegt. Das Pänomen hatte ich neulich auf meinem Netbook. Die Site wird dadurch unbenutzbar - und Auflösung vergrößern ist da auch nicht, mehr als 1024x600 gibts halt nicht.

Daher plädiere ich dafür, auf vertkale Zentrierung zu verzichten.

 

[neuroleptika]

Kommt drauf an was man will.
prm empfiehlt ja auch eine Methode ohne absolute Positionierung (mit vorgegebener Höhe in em).
Wenn die Inhalte aus Bildern (mit px-Höhe) und Text bestehen funktioniert das nicht immer ausreichend bei text-zoom.

Bei der Tabellenmethode passt sich die zentrierte Box vertikal an, hat aber Einschränkungen im IE5.x. Außerdem wirkt es nervös wenn sich die Zentrierung auf jeder Unterseite neu anpasst.

Hier ein Beispiel mit einer css-tabelle:
Vertikal zentriert
Im IE5.5 - 7 habe ich ein inline-block-hack verwendet.
Für den IE5.5 zusätzlich eine feste Breite in px (ein blöder Bug mit white-space: nowrap; ).
Den IE<5.5 habe ich überhaubt nicht berücksichtigt.

Edit:
Vielleicht gibt es auch keine Unterseiten oder die Inhalte bestehen nur aus Bildern oder nur aus Text oder die Seite hat eine bekannte px-Breite oder ...
Wir wissen es nicht.