1678 Stimmen

Wie kann ich ein div-Element mit CSS in allen Browsern vertikal zentrieren?

Ich möchte eine div vertikal mit CSS. Ich möchte keine Tabellen oder JavaScript, sondern nur reines CSS. Ich habe einige Lösungen gefunden, aber bei allen fehlt die Unterstützung für Internet Explorer 6.

<body>
    <div>Div to be aligned vertically</div>
</body>

Wie kann ich eine div vertikal in allen gängigen Browsern, einschließlich Internet Explorer 6?

29 Stimmen

@MarcoDemaio Sind die Leute nicht ständig verpönt tables für Layouts hier?

17 Stimmen

@Chud37: es hängt davon ab, was Sie tun müssen, Tabellen für das Layout sind in der Regel nicht vielseitig und lange in Code eingeben, mit css können Sie leicht ändern ein 2 Spalten-Layout in einem 3/4/5 Sols Layout usw. Aber in diesem Fall ist anders, mit Dutzenden von css Tipps und Tricks für eine so einfache Aufgabe, die mit einer perfekten Cross-Browser-Tabelle erreicht werden könnte, ist es wie der Versuch, in Ihr Haus durch das Fenster statt mit der Tür zu betreten.

0 Stimmen

Für den Fall, dass sich die Leute nicht um die Unterstützung älterer Browser kümmern: davidwalsh.name/css-vertikal-zentriert

-3voto

JLavoie Punkte 15134

Hier ist eine einfache Möglichkeit, die fast ohne Code auskommt:

CSS-Code:

.main{
    height: 100%;
}

.center{
    top: 50%;
    margin-top: 50%;
}

HTML-Code:

<div class="main">
    <div class="center">
        Hi, I am centered!
    </div>
</div>

Ihr Text wird in der Mitte der Seite erscheinen!

-4voto

stommestack Punkte 2411

In meinem Fall hat das funktioniert (nur in modernen Browsern getestet):

.textthatneedstobecentered {
  margin: auto;
  top: 0; bottom: 0;
}

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X