Ich möchte eine div
mit CSS vertikal zentrieren. Ich möchte 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 eine div
in allen gängigen Browsern, einschließlich Internet Explorer 6, vertikal zentrieren?
css
cross-browser
alignment
vertical-alignment
centering
Burak Erdem
quelle
quelle
tables
hier nicht ständig wegen Layouts missbilligt ?Antworten:
Im Folgenden finden Sie die beste Allround-Lösung, die ich erstellen kann, um ein Inhaltsfeld mit fester Breite und flexibler Höhe vertikal und horizontal zu zentrieren. Es wurde getestet und funktioniert für aktuelle Versionen von Firefox, Opera, Chrome und Safari.
Anzeigen eines Arbeitsbeispiels mit dynamischem Inhalt
Ich habe einige dynamische Inhalte eingebaut, um die Flexibilität zu testen, und würde gerne wissen, ob jemand Probleme damit sieht. Es sollte auch für zentrierte Überlagerungen gut funktionieren - Leuchtkasten, Popup usw.
quelle
.outer {position:absolute;width:100%;height:100%}
ist nicht notwendig, sie sind hier nur zur Demonstration. Wir brauchen nurdisplay:table
, wenn jemand so verwirrt ist wie ich..outer
undmiddle
den.inner
und seinen Stil einfach ignorieren . Ich weiß nicht, worum es gehtmargin-left
,margin-right
auf Auto gesetzt, da das Element dadurch nicht horizontal zentriert wird ?? !!!width: 100%;
und Hinzufügenmargin: 0 auto
zu.outer
ermöglicht auch eine variable Breite.top: 0; left 0;
fehlt, zumindest in Chrome, das den Standardwert auf 1 setzt.Eine weitere kann ich auf der Liste nicht sehen:
height
muss deklariert werden (siehe Variable Höhe )overflow: auto
, um ein Überlaufen von Inhalten zu verhindern (siehe Überlauf)Quelle: Absolute horizontale und vertikale Zentrierung in CSS
quelle
margin: auto;
Der einfachste Weg wären die folgenden 3 Zeilen CSS:
1) Position: relativ;
2) oben: 50%;
3) transformieren: translateY (-50%);
Es folgt ein BEISPIEL :
quelle
height
von außendiv
ist100%
. Funktioniert dann nur mitposition: absolute;
.-webkit-transform
Variante, die ich brauchte, damit diese Methode in Phantomjs funktioniert ... endete stundenlanges Kämpfen, also danke!Eigentlich brauchst du zwei Divs für die vertikale Zentrierung. Das div, das den Inhalt enthält, muss eine Breite und Höhe haben.
Hier ist das Ergebnis
quelle
Jetzt ist die Flexbox-Lösung ein sehr einfacher Weg für moderne Browser, daher empfehle ich dies für Sie:
quelle
navbar
, können Sie die Höhe mitheight: calc(100% - 55px)
oder unabhängig von der Höhe Ihrer Größe anpassennavbar
.float
. Vielen Dank.Edit 2020: Verwenden Sie diese Option nur, wenn Sie alte Browser wie IE8 unterstützen müssen (was Sie ablehnen sollten 😉). Wenn nicht, verwenden Sie die Flexbox.
Dies ist die einfachste Methode, die ich gefunden habe und die ich ständig benutze ( jsFiddle-Demo hier )
Vielen Dank an Chris Coyier von CSS Tricks für diesen Artikel .
Die Unterstützung beginnt mit IE8.
quelle
Nach vielen Recherchen habe ich endlich die ultimative Lösung gefunden. Es funktioniert sogar für schwebende Elemente. Quelltext anzeigen
quelle
50%
arbeitete für mich (nicht-50%
)Flexbox-Lösung
quelle
justify-content: center
Überprüfen Sie den Geigen-Link , um das Div auf einer Seite zu zentrieren .
Eine andere Möglichkeit ist die Verwendung einer Flexbox. Überprüfen Sie den Geigenlink .
Eine weitere Option ist die Verwendung einer CSS 3-Transformation:
quelle
%
,em
s undrem
s. Absolute oder feste Werte sind Pixel oder Punkte. Sie beziehen sich auf "es funktioniert nur mit einer deklarierten Höhe". Obwohl diese von Moes beschriebene Methode eine Höhe erfordert, ist der Prozentsatz der beste Prozentsatz, wenn Sie ihn in relativen Einheiten deklarieren, unabhängig davon, wie viel Inhalt sich innerhalb des zentrierten DIV befindet, den DIV vertikal erweitert, um seinem Inhalt zu entsprechen. Das ist das Schöne an dieser Methode. Die andere gute Sache ist, dass diese Methode in IE8 / 9/10 funktioniert, falls jemand diese Browser noch unterstützen muss.transform: translate(-50%, -50%);
Technik. Für IE8 würde ich es einfach oben / in der Mitte ausgerichtet lassen und weitermachen.Die einfachste Lösung ist unten:
quelle
Leider - aber nicht überraschend - ist die Lösung komplizierter als man es sich wünscht. Außerdem müssen Sie leider zusätzliche Divs um das Div verwenden, das vertikal zentriert werden soll.
Für standardkonforme Browser wie Mozilla, Opera, Safari usw. müssen Sie festlegen, dass das äußere Div als Tabelle und das innere Div als Tabellenzelle angezeigt wird - die dann vertikal zentriert werden können. Für Internet Explorer müssen Sie das innere Div absolut innerhalb des äußeren Div positionieren und dann das obere als 50% angeben . Auf den folgenden Seiten wird diese Technik gut erläutert und es werden auch einige Codebeispiele bereitgestellt:
Vertikale Zentrierung in CSS mit unbekannter Höhe (Internet Explorer 7-kompatibel)(nicht mehr aktiv)Es gibt auch eine Technik, um die vertikale Zentrierung mit JavaScript durchzuführen. Die vertikale Ausrichtung von Inhalten mit JavaScript und CSS zeigt dies.
quelle
Wenn sich jemand nur für Internet Explorer 10 (und höher) interessiert, verwenden Sie
flexbox
:Flexbox-Unterstützung: http://caniuse.com/flexbox
quelle
align-items: center;
!Eine moderne Möglichkeit, ein Element vertikal zu zentrieren, wäre die Verwendung
flexbox
.Sie benötigen einen Elternteil, um die Größe zu bestimmen, und ein Kind, um zu zentrieren.
Im folgenden Beispiel wird ein Div auf die Mitte in Ihrem Browser zentriert. Was wichtig ist , (in meinem Beispiel) ist eingestellt
height: 100%
aufbody
undhtml
dannmin-height: 100%
zu Ihrem Container.quelle
Nur vertikal zentrieren
Wenn Sie sich nicht für Internet Explorer 6 und 7 interessieren, können Sie eine Technik verwenden, die zwei Container umfasst.
Der äußere Behälter:
display: table;
Der innere Behälter:
display: table-cell;
vertical-align: middle;
Das Inhaltsfeld:
display: inline-block;
Sie können dem Inhaltsfeld jeden gewünschten Inhalt hinzufügen, ohne sich um dessen Breite oder Höhe zu kümmern!
Demo:
Siehe auch diese Geige !
Horizontal und vertikal zentrieren
Wenn Sie sowohl horizontal als auch vertikal zentrieren möchten, benötigen Sie außerdem Folgendes.
Der innere Behälter:
text-align: center;
Das Inhaltsfeld:
text-align: left;
oder anpassentext-align: right;
, es sei denn, Sie möchten, dass der Text zentriert wirdDemo:
Siehe auch diese Geige !
quelle
Verwandte: Bild zentrieren
quelle
Dies ist immer der Ort, an den ich gehe, wenn ich auf dieses Thema zurückkommen muss .
Für diejenigen, die den Sprung nicht machen wollen:
position:relative
oder anposition:absolute
.position:absolute
undtop:50%
auf den untergeordneten Containern den von oben nach unten in der Mitte der Mutter zu bewegen.Ein Beispiel hierfür im Code:
quelle
Verwenden der Flex-Eigenschaft von CSS.
oder mit
display: flex;
undmargin: auto;
Code-Snippet anzeigen
Textcenter anzeigen
Code-Snippet anzeigen
Verwenden der prozentualen Höhe und Breite (%).
Code-Snippet anzeigen
quelle
Ich habe gerade dieses CSS geschrieben und um mehr zu erfahren, gehen Sie bitte durch: Dieser Artikel mit vertikaler Ausrichtung richtet alles mit nur 3 Zeilen CSS aus .
quelle
CSS-Raster
quelle
Für Neuankömmlinge bitte versuchen
quelle
div
.<div style="display:flex"><div style="margin:auto">Inner</div></div>
Die Antwort von Billbad funktioniert nur mit einer festen Breite des
.inner
Div. Diese Lösung funktioniert für eine dynamische Breite, indem das Attributtext-align: center
dem.outer
div hinzugefügt wird .quelle
Die drei Codezeilen
transform
funktionieren praktisch in modernen Browsern und im Internet Explorer:Ich füge diese Antwort hinzu, da ich in der vorherigen Version dieser Antwort eine Unvollständigkeit festgestellt habe (und der Stapelüberlauf erlaubt mir nicht, einfach zu kommentieren).
'Position' relativ bringt das Styling durcheinander, wenn sich das aktuelle Div im Körper befindet und kein Container-Div hat. "Fest" scheint jedoch zu funktionieren, aber es korrigiert offensichtlich den Inhalt in der Mitte des Ansichtsfensters
Außerdem habe ich dieses Styling zum Zentrieren einiger Overlay-Divs verwendet und festgestellt, dass in Mozilla alle Elemente in diesem transformierten Div ihre unteren Ränder verloren haben. Möglicherweise ein Rendering-Problem. Wenn Sie jedoch nur die minimale Polsterung zu einigen von ihnen hinzufügen, wird dies korrekt wiedergegeben. Chrome und Internet Explorer haben die Boxen (überraschenderweise) ohne Auffüllen gerendert
quelle
Der folgende Link bietet eine einfache Möglichkeit, dies mit nur 3 Zeilen in Ihrem CSS zu tun:
Richten Sie alles vertikal mit nur 3 CSS-Zeilen aus .
Ich weiß, dass die Frage bereits eine Antwort hat, aber ich habe den Link wegen seiner Einfachheit als nützlich angesehen.
quelle
Keine Antwort auf Browserkompatibilität, sondern auch das neue Grid und die nicht ganz so neue Flexbox-Funktion.
Gitter
Von: Mozilla - Grid Documentation - Div vertikal ausrichten
Browser-Unterstützung: Grid-Browser-Unterstützung
CSS:
HTML:
Flexbox
Browser-Unterstützung: Flexbox-Browser-Unterstützung
CSS:
quelle
Ich denke eine solide Lösung für alle Browser ohne Flexbox - "align-items: center;" ist eine Kombination aus Anzeige: Tabelle und vertikaler Ausrichtung: Mitte;.
CSS
HTML
:Demo: https://jsfiddle.net/6m640rpp/
quelle
Ich habe es damit gemacht (Breite, Höhe, Rand oben und Rand links entsprechend ändern):
quelle
Der Inhalt kann mithilfe der Flexbox einfach zentriert werden. Der folgende Code zeigt das CSS für den Container, in dem der Inhalt zentriert werden muss:
quelle
Speziell für Eltern-Divs mit relativer (unbekannter) Höhe ist die Zentrierung im Unbekannten funktioniert Lösung hervorragend für mich. Der Artikel enthält einige wirklich schöne Codebeispiele.
Es wurde in Chrome, Firefox, Opera und Internet Explorer getestet.
quelle
Mach es einfach: Füge die Klasse zu deinem hinzu
div
:Und lesen Sie diesen Artikel für eine Erklärung. Hinweis:
Height
ist erforderlich.quelle
Es gibt einen Trick, den ich kürzlich herausgefunden habe: Du musst ihn benutzen
top 50%
und dann machst du einentranslateY(-50%)
quelle