Der Flexible Box-Weg
Die vertikale Ausrichtung ist jetzt ganz einfach durch die Verwendung des Flexible Box-Layouts. Heutzutage wird diese Methode in einer großen Anzahl von Webbrowsern unterstützt, außer Internet Explorer 8 & 9. Daher müssten wir einige Hacks/Polyfills oder unterschiedliche Ansätze für IE8/9 verwenden.
Im Folgenden zeige ich Ihnen, wie das mit nur 3 Textzeilen funktioniert (unabhängig von der alten Flexbox-Syntax).
Hinweis: Es ist besser, eine zusätzliche Klasse anstelle von Änderungen an .jumbotron zu verwenden, um die vertikale Ausrichtung zu erreichen. Ich könnte z.B. den Klassennamen vertical-center verwenden.
Hier ist ein Beispiel (Ein Mirror auf jsbin).
...
.vertical-center {
min-height: 100%; /* Fallback für Browser, die die vh-Einheit nicht unterstützen */
min-height: 100vh; /* Diese beiden Zeilen zählen als eine :-) */
display: flex;
align-items: center;
}
Wichtige Hinweise (im Demo berücksichtigt):
-
Ein Prozentsatz der Werte der height- oder min-height-Eigenschaften ist relativ zur height des übergeordneten Elements, daher sollten Sie die height des Elternelements explizit angeben.
-
Vendor-prefixes / alte Flexbox-Syntax werden im geposteten Ausschnitt aufgrund der Kürze weggelassen, sind aber im Online-Beispiel vorhanden.
-
In einigen alten Webbrowsern wie Firefox 9 (in dem ich getestet habe) nimmt der Flex-Container - .vertical-center in diesem Fall - keinen verfügbaren Platz innerhalb des Elternelements ein, daher müssen wir die width-Eigenschaft angeben wie: width: 100%.
-
Auch in einigen der oben genannten Webbrowser erscheint das Flex-Element - .container in diesem Fall - horizontal möglicherweise nicht in der Mitte. Es scheint, dass die angewendeten links/rechts-margin-Eigenschaften von auto keine Auswirkung auf das Flex-Element haben.
Daher müssen wir es durch box-pack / justify-content ausrichten.
Für weitere Details und/oder die vertikale Ausrichtung von Spalten können Sie sich auf das folgende Thema beziehen:
Der traditionelle Weg für veraltete Webbrowser
Das ist die alte Antwort, die ich zur Zeit der Beantwortung dieser Frage geschrieben habe. Diese Methode wurde hier diskutiert und soll auch in Internet Explorer 8 und 9 funktionieren. Ich werde es kurz erklären:
Im Inline-Fluss kann ein Inline-Level-Element durch die Deklaration vertical-align: Mitte vertikal in die Mitte ausgerichtet werden. Spezifikation von W3C:
Mitte
Richten Sie den vertikalen Mittelpunkt des Feldes mit der Grundlinie des übergeordneten Feldes plus der Hälfte der x-Höhe des übergeordneten Feldes aus.
In Fällen, in denen das übergeordnete Element - das .vertical-center-Element in diesem Fall - eine explizite height hat, könnten wir zufälligerweise ein Kindelement mit genau derselben height des Elternelements haben, und wir könnten die Grundlinie des Elternelements auf den Mittelpunkt des Vollhöhe-Kinds verschieben und überraschenderweise unser gewünschtes Inline-Kind - das .container - vertikal zentriert ausrichten.
Alles zusammenstellen
Das gesagt habend, könnten wir ein Vollhöhenelement innerhalb des .vertical-center durch die ::before- oder ::after-Pseudo-Elemente erstellen und auch den Standard-display-Typ davon und des anderen Kindes, dem .container, zu inline-block ändern.
Dann verwenden Sie vertical-align: Mitte;, um die Inline-Elemente vertikal auszurichten.
Hier ist es:
...
.vertical-center {
height:100%;
width:100%;
text-align: Mitte; /* Ausrichtung der Inline(-Block)-Elemente horizontal */
Schriftart: 0/0 a; /* Abstand zwischen Inline(-Block)-Elementen entfernen */
}
.vertical-center:before { /* Erstellt ein Vollhöhe-Inline-Block-Pseudo-Element */
Inhalt: " ";
display: inline-block;
vertical-align: Mitte; /* Vertikale Ausrichtung des Inline-Elements */
height: 100%;
}
.vertical-center > .container {
maximalbreite: 100%;
Anzeige: inline-block;
vertical-align: Mitte; /* Vertikale Ausrichtung des Inline-Elements */
/* Schriftart-Eigenschaft zurücksetzen */
Schriftart: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
FUNKTIONIERENDES DEMO.
Außerdem, um unerwartete Probleme in sehr kleinen Bildschirmen zu vermeiden, können Sie die Höhe des Pseudo-Elements auf auto oder 0 zurücksetzen oder seinen display-Typ bei Bedarf auf none ändern:
@media (max-width: 768px) {
.vertical-center:before {
height: auto;
/* Oder */
display: none;
}
}
AKTUALISIERTES DEMO
Und noch etwas:
Wenn es footer / header-Bereiche um den Container gibt, ist es besser, diese Elemente ordnungsgemäß zu positionieren (relativ, absolut? Ihnen überlassen.) und einen höheren z-index-Wert hinzuzufügen (zur Sicherheit), um sie immer oben auf den anderen zu halten.
