1678 Stimmen

Burak Erdem avatar

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

Gefragt el 28 de Dezember, 2008
Wann wurde die Frage gestellt
1706446 Ansichten
Anzahl der Besuche der Frage
5 Antworten
Anzahl der Fragenantworten
Gelöst
Aktueller Status der Frage

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?

Gefragt el 28 de Dezember, 2008 von Burak Erdem

29 Stimmen

Avatar von Chud37

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

Kommentiert el 21 de Januar, 2013 von Chud37

17 Stimmen

Avatar von Marco Demaio

@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.

Kommentiert el 24 de Januar, 2013 von Marco Demaio

0 Stimmen

Avatar von Karolis Šarapnickis

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

Kommentiert el 4 de September, 2014 von Karolis Šarapnickis
Anzeigen 5 weitere Kommentare

Antworten

Zu viele Anzeigen?

-1voto

G-Cyrillus avatar
G-Cyrillus Punkte 93567

Um eine Box in einer Webseite vertikal auszurichten, einschließlich Internet Explorer 6, können Sie verwenden:

  1. Bedingte Kommentare
  2. El haslayout Eigenschaft
  3. display: table-value für andere (und jetzt Flex)

Fiddle

/* Internet Explorer 8 and others */
.main {
  width: 500px;
  margin: auto;
  border: solid;
}
html {
  height: 100%;
  width: 100%;
  display: table;
}
body {
  display: table-cell;
  vertical-align: middle;
}

<!-- [if lte IE 7]>
<style> /* Should be in the <head> */
    html, body , .ie {
        height: 100%;
        text-align: center;
        white-space: nowrap;
    }
    .ie , .main{
        display: inline; /* Used with zoom in case you take a block element instead an inline element */
        zoom: 1;
        vertical-align: middle;
        text-align: left;
        white-space: normal;
    }
</style>
<b class="ie"></b>
<!--[endif]-->
<div class="main">
  <p>Fill it up with your content </p>
  <p><a href="https://jsfiddle.net/h8z24s5v/embedded/result/">JsFiddle versie</a></p>
</div>

Eigentlich würde der Internet Explorer 7 hier einige Probleme bereiten, da er der einzige ist, der strikt angewendet wird height: 100% auf HTML/Body-Elemente.

Aber, dies ist Vergangenheit und heute und wer kümmert sich noch um alte Versionen von Internet Explorer, table/table-cell ist genau richtig, display: flex ist vielversprechend, und display: grid wird eines Tages auftauchen.

Ein weiteres Beispiel aus der heutigen Zeit via flex

html {
  display: flex;
  min-height: 100vh;/* or height */
}

body {
  margin: auto;
}

<div>Div to be aligned vertically</div>
Beantwortet el 13 de Marsch, 2015 von G-Cyrillus (93567 Punkte )

-1voto

th3pirat3 avatar
th3pirat3 Punkte 500

Bei dieser Methode wird keine Transformation verwendet. Es gibt also kein Problem damit, dass die Ausgabe unscharf wird.

position: absolute;
width: 100vw;
top: 25%;
bottom: 25%;
text-align: center;
Beantwortet el 2 de Juli, 2016 von th3pirat3 (500 Punkte )

-1voto

damiano celent avatar
damiano celent Punkte 701

Dies ist bei weitem der einfachste Ansatz und funktioniert auch bei nicht blockierenden Elementen. Der einzige Nachteil ist, dass es sich um Flexbox handelt und daher ältere Browser dies nicht unterstützen.

<div class="sweet-overlay">
    <img class="centered" src="http://jimpunk.com/Loading/loading83.gif" />
</div>

Link zu CodePen:

http://codepen.io/damianocel/pen/LNOdRp

Wichtig ist hier, dass für die vertikale Zentrierung ein übergeordnetes Element (Container) definiert werden muss und dass das img eine geringere Höhe als das übergeordnete Element haben muss.

Beantwortet el 5 de April, 2016 von damiano celent (701 Punkte )

3 Stimmen

Avatar von Luca Borrione

Link kaputt bitte fügen Sie das entsprechende css direkt in die Antwort ein

Kommentiert el 23 de Dezember, 2018 von Luca Borrione

-1voto

Ari avatar
Ari Punkte 4115

Das Folgende funktioniert in meinem Fall und wurde in Firefox getestet.

#element {
    display: block;
    transform: translateY(50%);
    -moz-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
}

Die Höhe des Divs und die Höhe des Parent sind dynamisch. Ich verwende es, wenn es andere Elemente auf demselben übergeordneten Element gibt, das höher ist als das Zielelement, wobei beide horizontal inline positioniert sind.

Beantwortet el 23 de Dezember, 2015 von Ari (4115 Punkte )

-1voto

Peter Girnus avatar
Peter Girnus Punkte 2597

Deklarieren Sie dieses Mixin:

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Dann fügen Sie es in Ihr Element ein:

.element{
    @include vertical-align();
}
Beantwortet el 27 de Oktober, 2015 von Peter Girnus (2597 Punkte )

0 Stimmen

Avatar von Arnold Roa

Das ist einfaches CSS? Was ist mit der Browserunterstützung?

Kommentiert el 28 de November, 2015 von Arnold Roa

Verwandte Fragen

Empfohlene Fragen

Top-Tags

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:

Yandex
X