Burak Erdem
Ich möchte a zentrieren div vertikal mit CSS. Ich will keine Tabellen oder JavaScript, sondern nur reines CSS. Ich habe einige Lösungen gefunden, aber allen fehlt die Unterstützung für Internet Explorer 6.
<body>
<div>Div to be aligned vertically</div>
</body>
Wie kann ich a zentrieren? div vertikal in allen gängigen Browsern, einschließlich Internet Explorer 6?
DrupalFieber
Der einfachste Weg wäre folgender drei Zeilen von CSS:
1) Position: relativ;
2) oben: 50 %;
3) transformieren: translateY(-50%);
Es folgt ein 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 richtig, wenn die Höhe des äußeren Div mit “min-height: 170px” eingestellt ist
– Bartburg
14. August 2015 um 9:10 Uhr
Beeinträchtigt den Z-Index
– Reißer234
12. November 2016 um 19:48 Uhr
geht nicht wann height von außen div ist 100%. Dann funktioniert nur noch mit position: absolute;.
– ArchLinuxTux
13. April 2018 um 8:01 Uhr
Ich hatte diese Lösung zuerst an anderer Stelle gefunden, aber ein besonderes Lob an diese spezielle Antwort für die Erwähnung der -webkit-transform insbesondere Variante, die ich brauchte, damit diese Methode in Phantomjs funktioniert … beendete Stunden des Kampfes, also danke!
– drmrbrewer
23. Oktober 2018 um 11:02 Uhr
Dies ist die beste Antwort. Das ist unglaublich einfach, bringt die geringste Menge an vorhandener Arbeit durcheinander und funktioniert auf allem, was bis zum IE9 zurückreicht, den niemand mehr verwendet. Lasst uns diesem Typen noch ein paar Upvotes geben!
– Nick Steele
20. Juni 2019 um 18:40 Uhr
Santosh Khalse
Jetzt die Flexbox Lösung ist ein sehr einfacher Weg für moderne Browser, daher empfehle ich dies für Sie:
.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 haben navbarkönnen Sie die Höhe mit optimieren height: calc(100% - 55px) oder was auch immer die Höhe von Ihnen ist navbar ist.
– Adrian
4. September 2017 um 15:33 Uhr
Ich musste auch Ränder/Polsterung vom Körper entfernen
– Ben
21. April 2018 um 22:14 Uhr
Funktioniert gut mit float. Vielen Dank.
– Amir Shabani
15. September 2019 um 12:04 Uhr
Bitte beachten Sie, dass sich dies bei “neueren älteren” mobilen Safari-Browsern möglicherweise seltsam verhält. Die empfohlene Verwendung anstelle von height ist flex-basiert auf der .container-Klasse
– Neun Magien
29. Oktober 2019 um 13:34 Uhr
@NineMagics Wie macht man das?
– Mateen Ulhaq
12. Mai 2021 um 2:54 Uhr
Peter Mortensen
Tatsächlich benötigen Sie zwei Divs für die vertikale Zentrierung. Das div mit dem Inhalt 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.
Wenn Sie eine haben navbarkönnen Sie die Höhe mit optimieren height: calc(100% - 55px) oder was auch immer die Höhe von Ihnen ist navbar ist.
– Adrian
4. September 2017 um 15:33 Uhr
Ich musste auch Ränder/Polsterung vom Körper entfernen
– Ben
21. April 2018 um 22:14 Uhr
Funktioniert gut mit float. Vielen Dank.
– Amir Shabani
15. September 2019 um 12:04 Uhr
Bitte beachten Sie, dass sich dies bei “neueren älteren” mobilen Safari-Browsern möglicherweise seltsam verhält. Die empfohlene Verwendung anstelle von height ist flex-basiert auf der .container-Klasse
– Neun Magien
29. Oktober 2019 um 13:34 Uhr
@NineMagics Wie macht man das?
– Mateen Ulhaq
12. Mai 2021 um 2:54 Uhr
Peter Mortensen
Bearbeiten 2020: Verwenden Sie dies nur, wenn Sie alte Browser wie InternetExplorer 8 (was Sie ablehnen sollten 😉). Wenn nicht, verwenden Flexbox.
Dies ist die einfachste Methode, die ich gefunden habe, und ich verwende sie ständig (jsFiddle-Demo hier).
Vielen Dank an 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 verweigerte, war die Lösung für mich nicht Flexbox, sondern Grid-System. Es war ein bisschen ärgerlich für mich, Inhalte in einem Container zu zentrieren, der, wenn er zu klein wurde, eine Bildlaufleiste anzeigen musste, und der zentrierte Inhalt verlor bei allen anderen Methoden den Bildlaufbereich. Im Container verwende ich einfach: { display: grid; Ausrichtungselemente: Mitte; } Hoffe, das hilft jemandem.
– Tomasofen
30. Mai 2020 um 2:51 Uhr
@MarcoDemaio Nicht ständig die Stirn runzeln
tablesfür Layouts hier?– Chud37
21. Januar 2013 um 15:35 Uhr
@ Chud37: Es hängt davon ab, was Sie tun müssen, Tabellen für das Layout sind im Allgemeinen nicht vielseitig und lang, um Code einzugeben. Mit CSS können Sie ein 2-Spalten-Layout problemlos in ein 3/4/5-Sol-Layout usw. ändern. Aber in diesem Fall ist anders, Dutzende von CSS-Tipps und Tricks für eine so einfache Aufgabe zu verwenden, die mit einer perfekten Cross-Browser-Tabelle bewerkstelligt werden könnte, ist wie der Versuch, Ihr Haus durch das Fenster zu betreten, anstatt die Tür zu benutzen.
– Marco Demaio
24. Januar 2013 um 19:52 Uhr
Falls sich die Leute nicht für die Unterstützung älterer Browser interessieren: davidwalsh.name/css-vertical-center
– Karolis Šarapnickis
4. September 2014 um 10:32 Uhr
css-vertical-center.com Es gibt einige Lösungen mit Informationen zur Browserkompatibilität
– EscapeNetscape
4. Februar 2019 um 14:24 Uhr
Hier sind viele Möglichkeiten, dies zu tun css-tricks.com/centering-css-complete-guide
– Michael Yurin
4. April 2019 um 12:45 Uhr