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?
Edit 2020: Verwenden Sie dies nur, wenn Sie alte Browser unterstützen müssen wie Internet Explorer 8 (was Sie nicht tun sollten). Wenn nicht, verwenden Sie Flexbox .
Dies ist die einfachste Methode, die ich gefunden habe, und ich verwende sie immer wieder ( jsFiddle-Demo hier ).
Danken Sie Chris Coyier von CSS Tricks für dieser Artikel .
html, body{
height: 100%;
margin: 0;
}
.v-wrap{
height: 100%;
white-space: nowrap;
text-align: center;
}
.v-wrap:before{
content: "";
display: inline-block;
vertical-align: middle;
width: 0;
/* adjust for white space between pseudo element and next sibling */
margin-right: -.25em;
/* stretch line height */
height: 100%;
}
.v-box{
display: inline-block;
vertical-align: middle;
white-space: normal;
}
<div class="v-wrap">
<article class="v-box">
<p>This is how I've been doing it for some time</p>
</article>
</div>Die Unterstützung beginnt mit Internet Explorer 8.
Da ich die Unterstützung für alte Browser ablehne, war die Lösung für mich nicht Flexbox, sondern das Grid-System. Es war ein bisschen ärgerlich für mich Zentrum Inhalt in einem Container, der, wenn es zu klein in der Höhe wird, benötigt, um Scrollbar zu zeigen, und der zentrierte Inhalt war verlieren den Scrollbereich mit allen anderen Methoden. In dem Container benutze ich einfach: { display: grid; align-items: center; } Hoffentlich hilft das jemandem.
Nach vielen Recherchen habe ich schließlich die ultimative Lösung gefunden. Sie funktioniert sogar für schwebende Elemente. Quelle anzeigen
.element {
position: relative;
top: 50%;
transform: translateY(-50%); /* or try 50% */
}
Das funktioniert sehr gut, vorausgesetzt, Sie denken daran, dass das Container-Element eine implizite oder explizite Höhe haben muss; jsfiddle.net/14kt53un Ein kleines Problem für diejenigen, die relativ neu in CSS sind.
Von allen Antworten ist dies die einfachste! Ich hoffe, andere sehen Ihre Antwort auch! Ich danke Ihnen! Nebenbei bemerkt, 50% hat bei mir funktioniert (nicht -50% )
Das war unglaublich. Nach stundenlangem Suchen hat das hier für mich funktioniert. Ich musste translateY(50%) verwenden, ich bin sicher, warum, aber es hat funktioniert. In meinem Fall wurde das übergeordnete Element von AEM Forms Engine erstellt, und ich kann nur bestimmte untergeordnete Elemente steuern.
Verwenden Sie die CSS Flexbox align-items Eigenschaft, um dies zu erreichen.
html, body {
height: 100%;
}
body {
display: flex;
align-items: center;
}
<div>This is centered vertically</div>
So zentrieren Sie das Div auf einer Seite, überprüfen Sie den Fiddle-Link .
#vh {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.box{
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
padding: 25px;
width: 100px;
height: 100px;
background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>Eine weitere Möglichkeit ist die Verwendung von Flexboxen, überprüfen Sie den Fiddle-Link .
.vh {
background-color: #ddd;
height: 400px;
align-items: center;
display: flex;
}
.vh > div {
width: 100%;
text-align: center;
vertical-align: middle;
}
<div class="vh">
<div>Div to be aligned vertically</div>
</div>Eine andere Möglichkeit ist die Verwendung einer CSS-3-Transformation:
#vh {
position: absolute;
top: 50%;
left: 50%;
/*transform: translateX(-50%) translateY(-50%);*/
transform: translate(-50%, -50%);
}
.box{
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
padding: 25px;
width: 100px;
height: 100px;
background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>
@ArmelLarcier Das ist falsch. Relative Einheiten sind Prozentsätze % , em s und rem s. Absolute oder feste Werte sind Pixel oder Punkte. Was Sie meinen, ist "es funktioniert nur mit einer angegebenen Höhe". Obwohl die von Moes beschriebene Methode eine Höhe erfordert, ist es am besten, die Höhe in relativen Einheiten anzugeben, d. h. in Prozent, denn egal, wie viel Inhalt sich in dem zentrierten DIV befindet, das DIV wird sich vertikal ausdehnen, um sich dem Inhalt anzupassen. Das ist das Schöne an dieser Methode. Eine weitere gute Sache ist, dass diese Methode in IE8/9/10 funktioniert, falls jemand diese Browser noch unterstützen muss.
@ricardozea Ich will nicht stur sein, aber zu sagen, dass das zentrierte div sich vertikal ausdehnt, während es vertikal zentriert bleibt, ist falsch. Versuchen Sie es. Ich weiß, wenn ich sage, dass die Höhe "fest" sein muss, ist das nicht das richtige Wort. Sie ist in der Tat relativ zu ihrem Elternteil. Jedenfalls halte ich die Methode von Chris Coyer für sinnvoller, siehe meine Antwort stackoverflow.com/a/21919578/1491212 Sie ist mit IE8 kompatibel UND funktioniert auch bei einem Element ohne bestimmte Abmessungen.
@ArmelLarcier Es ist alles gut. Ist nicht falsch Bruder. Versuchen Sie es: codepen.io/shshshaw/pen/gEiDt - Fügen Sie Absätze in den grünen Kasten ein ;]. Zugegeben, es verwendet Modernizr, um den Effekt zu erzielen, aber alles in allem ist es machbar. Ich habe deine Antwort gesehen und auch den Beitrag von CSS-Tricks.com, aber diese Methode gefällt mir nicht, da sie zusätzliches Markup verwendet und das CSS zu umfangreich ist. Ich denke, die beste Lösung ist entweder mit Flexbox oder die transform: translate(-50%, -50%); Technik. Für IE8 würde ich es einfach oben/mittig ausgerichtet lassen und weitermachen.
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/