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?
Bitte fügen Sie eine Stapel-Schnipsel der zeigt, wie dieser CSS-Code vertikal richtet eine div .
Das funktioniert auch <div style="display:flex"><div style="margin:auto">Inner</div></div>
Ich bin auf diese wunderbare Erklärung der Ausrichtungselemente gestoßen und rechtfertige den Inhalt. Unbedingt lesen: stackoverflow.com/questions/42613359/
Die drei Codezeilen mit transform funktioniert praktisch auf modernen Browsern und dem Internet Explorer:
.element{
position: relative;
top: 50%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}Ich füge diese Antwort hinzu, da ich einige Unvollständigkeiten in der vorherigen Version dieser Antwort gefunden habe (und Stack Overflow mir nicht erlaubt, einfach zu kommentieren).
position' relativ bringt das Styling durcheinander, wenn sich das aktuelle div im body befindet und kein container div hat. Allerdings scheint 'fixed' zu funktionieren, aber es fixiert offensichtlich den Inhalt in der Mitte des Viewports 
Außerdem habe ich dieses Styling zum Zentrieren einiger Overlay-Divs verwendet und festgestellt, dass in Mozilla alle Elemente innerhalb dieses transformierten Divs ihre unteren Ränder verloren hatten. Möglicherweise ein Rendering-Problem. Aber wenn ich nur die minimale Auffüllung zu einigen von ihnen hinzufügte, wurden sie korrekt gerendert. Chrome und Internet Explorer (überraschenderweise) gerendert die Boxen ohne jede Notwendigkeit für Padding 
Tun Sie es einfach: Fügen Sie die Klasse bei Ihrem div :
.modal {
margin: auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
height: 240px;
}Und lesen dieser Artikel für eine Erklärung. Hinweis: Height notwendig ist.
Die Antwort von Billbad funktioniert nur mit einer festen Breite des .inner div. Diese Lösung funktioniert für eine dynamische Breite durch Hinzufügen des Attributs text-align: center a la .outer div.
.outer {
position: absolute;
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
text-align: center;
display: inline-block;
width: auto;
}
<div class="outer">
<div class="middle">
<div class="inner">
Content
</div>
</div>
</div>
Interessant! Ich verwende eine fast identische Technik! -> stackoverflow.com/questions/396145/
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.
29 Stimmen
@MarcoDemaio Sind die Leute nicht ständig verpönt
tablesfü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
0 Stimmen
@MarcoDemaio : Weil die Verwendung von Tabellen mit valign Funktioniert nicht ? :)
0 Stimmen
Die moderne Art, es zu tun.
1 Stimmen
css-vertical-center.com es gibt einige Lösungen mit Informationen zur Browserkompatibilität
3 Stimmen
Es gibt viele Möglichkeiten, dies zu tun css-tricks.com/centering-css-complete-guide
0 Stimmen
Das hat mir geholfen: developer.mozilla.org/de-US/docs/Web/CSS/