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?
Im Folgenden finden Sie die beste Allround-Lösung, die ich für die vertikale und horizontale Zentrierung einer festen Breite finden konnte, flexible Höhe Inhaltsfeld. Es wurde getestet und funktioniert mit den aktuellen Versionen von Firefox, Opera, Chrome und Safari.
.outer {
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
/* Whatever width you want */
}
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>Ein Arbeitsbeispiel mit dynamischem Inhalt anzeigen
Ich habe einige dynamische Inhalte eingefügt, um die Flexibilität zu testen, und würde gerne wissen, ob jemand Probleme damit hat. Es sollte auch gut für zentrierte Overlays funktionieren - Lightbox, Pop-up, etc.
Der einfachste Weg wäre der folgende drei Linien von CSS:
1) Position: relativ;
2) oben: 50%;
3) transform: translateY(-50%);
Nachfolgend finden Sie eine Beispiel :
div.outer-div {
height: 170px;
width: 300px;
background-color: lightgray;
}
div.middle-div {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
<div class='outer-div'>
<div class='middle-div'>
Test text
</div>
</div>
Hinweis: Funktioniert nicht korrekt, wenn die Höhe des äußeren Divs mit "min-height: 170px" eingestellt ist
Funktioniert nicht, wenn height von außen div es 100% . Funktioniert dann nur mit position: absolute; .
Eine weitere Person kann ich nicht auf der Liste finden:
.Center-Container {
position: relative;
height: 100%;
}
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
border: solid black;
}height deklariert werden muss (siehe Variable Höhe )overflow: auto um ein Überschwappen von Inhalten zu verhindern (siehe Überlauf)Fuente: <a href="https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css" rel="noreferrer">Absolute horizontale und vertikale Zentrierung in CSS</a>
Jetzt ist die Flexbox Lösung ist ein sehr einfacher Weg für moderne Browser, daher empfehle ich Ihnen dies:
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background: green;
}
body,
html {
height: 100%;
}
<div class="container">
<div>Div to be aligned vertically</div>
</div>
Wenn Sie eine navbar können Sie die Höhe mit height: calc(100% - 55px) oder die Höhe Ihrer navbar ist.
Eigentlich brauchen Sie zwei div's für die vertikale Zentrierung. Das div, das den Inhalt enthält, muss eine Breite und Höhe haben.
#container {
position: absolute;
top: 50%;
margin-top: -200px;
/* Half of #content height */
left: 0;
width: 100%;
}
#content {
width: 624px;
margin-left: auto;
margin-right: auto;
height: 395px;
border: 1px solid #000000;
}
<div id="container">
<div id="content">
<h1>Centered div</h1>
</div>
</div>Hier ist das Ergebnis .
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/