Wichtig! Das vertikale Zentrum ist relativ zur Höhe des Elternteils
Wenn das übergeordnete Element des Elements, das Sie zentrieren möchten, keine definierte
Höhe hat , funktioniert keine der vertikalen Zentrierungslösungen!
Nun zur vertikalen Zentrierung in Bootstrap 4 ...
Sie können die neuen Dienstprogramme für Flexbox & Größe verwenden , um die container
volle Höhe und display: flex
. Diese Optionen erfordern kein zusätzliches CSS (außer dass die Höhe des Containers (dh: HTML, Body) 100% betragen muss ).
Option 1 align-self-center
für Flexbox-Kind
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center">
I'm vertically centered
</div>
</div>
https://www.codeply.com/go/fFqaDe5Oey
Option 2 align-items-center
für Flexbox-Eltern ( .row
ist display:flex; flex-direction:row
)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="jumbotron">
I'm vertically centered
</div>
</div>
</div>
</div>
https://www.codeply.com/go/BumdFnmLuk
Option 3 justify-content-center
für Flexbox-Eltern ( .card
ist display:flex;flex-direction:column
)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="card h-100 border-primary justify-content-center">
<div>
...card content...
</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/3gySSEe7nd
Weitere Informationen zur vertikalen Zentrierung von Bootstrap 4
Da Bootstrap 4 nun Flexbox und andere Dienstprogramme bietet , gibt es viele Ansätze für die vertikale Ausrichtung. http://www.codeply.com/go/WG15ZWC4lf
1 - Vertikale Mitte mit automatischen Rändern:
Eine andere Möglichkeit, vertikal zu zentrieren, ist die Verwendung my-auto
. Dadurch wird das Element in seinem Container zentriert. Zum Beispiel h-100
macht die Zeile die volle Höhe und my-auto
zentriert die col-sm-12
Spalte vertikal .
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
Vertikales Zentrum mit Auto Margins Demo
my-auto
stellt Ränder auf der vertikalen y-Achse dar und entspricht:
margin-top: auto;
margin-bottom: auto;
2 - Vertikales Zentrum mit Flexbox:
Da Bootstrap 4 .row
jetzt ist display:flex
, können Sie es einfach align-self-center
für jede Spalte verwenden, um es vertikal zu zentrieren ...
<div class="row">
<div class="col-6 align-self-center">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
oder verwenden Sie align-items-center
insgesamt .row
, um alle col-*
in der Reihe vertikal zu zentrieren ...
<div class="row align-items-center">
<div class="col-6">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
Demo für Spalten mit vertikaler Mitte und unterschiedlicher Höhe
Sehen Sie sich diese Frage / Antwort zur Mitte an, aber behalten Sie die gleiche Höhe bei
3 - Vertikales Zentrum mit Anzeige-Dienstprogrammen:
Bootstrap 4 weist Anzeige utils , die verwendet werden können für display:table
, display:table-cell
, display:inline
, etc .. Diese können mit der verwendet werden , den vertikalen Ausrichtung utils auszurichten inline, inline-Block oder Tabellenzellenelementen.
<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am centered vertically
</div>
</div>
</div>
Vertikales Zentrum mit Display Utils Demo
Weitere Beispiele
Bild in <div>
vertikaler Mitte in vertikaler Mitte. Zeile in .container
Vertikale Mitte und unten in <div>
Kind mit vertikaler Mitte im übergeordneten Vollbild-Jumbotron in vertikaler Mitte
Wichtig! Habe ich Höhe erwähnt?
Denken Sie daran, dass die vertikale Zentrierung relativ zur Höhe des übergeordneten Elements ist. Wenn Sie sich in den meisten Fällen auf die gesamte Seite konzentrieren möchten, sollte dies Ihr CSS sein ...
body,html {
height: 100%;
}
Oder verwenden Sie min-height: 100vh
( min-vh-100
in Bootstrap 4.1+) für das übergeordnete Element / den Container. Wenn Sie ein untergeordnetes Element im übergeordneten Element zentrieren möchten. Der Elternteil muss eine definierte Höhe haben .
Siehe auch:
Vertikale Ausrichtung in Bootstrap 4
Bootstrap 4 Vertikale und horizontale Ausrichtung zentrieren
Sie können Ihren Container vertikal ausrichten, indem Sie den übergeordneten Container biegen lassen und Folgendes hinzufügen
align-items:center
:Stift aktualisiert
quelle
html, body {height:100%}
... das hat es funktioniert! Vielen Dank!Das Befolgen von Bootstrap 4-Klassen hat mir geholfen, dieses Problem zu lösen
quelle
Da keines der oben genannten Verfahren für mich funktioniert hat, füge ich eine weitere Antwort hinzu.
Ziel: Vertikales und horizontales Ausrichten eines Divs auf einer Seite mithilfe von Bootstrap 4-Flexbox-Klassen.
Schritt 1: Stellen Sie Ihr äußerstes Div auf eine Höhe von ein
100vh
. Dadurch wird die Höhe auf 100% der Veiwport-Höhe eingestellt. Wenn Sie dies nicht tun, funktioniert nichts anderes. Das Festlegen einer Höhe von100%
ist nur relativ zum übergeordneten Element. Wenn also das übergeordnete Element nicht die volle Höhe des Ansichtsfensters aufweist, funktioniert nichts. Im folgenden Beispiel habe ich den Body auf 100vh eingestellt.Schritt 2: Legen Sie den Container div als Flexbox-Container mit der
d-flex
Klasse fest.Schritt 3: Zentrieren Sie div horizontal mit der
justify-content-center
Klasse.Schritt 4: Div vertikal mit dem zentrieren
align-items-center
Schritt 5: Seite ausführen, Ihre vertikal und horizontal zentrierte Div anzeigen.
Beachten Sie, dass für das zentrierte Div selbst (das untergeordnete Div) keine spezielle Klasse festgelegt werden muss.
quelle
100vh
Trick hat mir sehr geholfen. Bootstrap bietet auch dievh-100
Klasse dafür.quelle
Ich habe alle Antworten hier ausprobiert, aber hier herausgefunden, ist der Unterschied zwischen h-100 und vh-100 Hier ist meine Lösung:
quelle
Verwenden Sie in Bootstrap 4 (Beta)
align-middle
. Siehe Bootstrap 4-Dokumentation zur vertikalen Ausrichtung :quelle
quelle
In dieser Zeile geschieht die Magie
<div class="col-md-6 my-auto">
, diemy-auto
den Inhalt der Spalte zentriert. Dies funktioniert hervorragend in Situationen wie dem obigen Codebeispiel, in denen Sie möglicherweise ein Bild mit variabler Größe haben und den Text in der Spalte in der richtigen Zeile haben müssen.quelle
Ich habe es so mit Bootstrap gemacht
4.3.1
:quelle
quelle
flex-grow-1
Klasse zur Karte wird verhindert, dass sie verkleinert wird.Vertikale Ausrichtung Mit diesem Bootstrap 4 Klassen:
z.B:
und wenn du willst, dass Eltern Kreis sind:
Welche zwei benutzerdefinierten CSS-Klassen sind wie folgt:
Die endgültige Verwendung kann wie folgt sein:
quelle
Platzieren Sie Ihren Inhalt in einem Flexbox-Container, der 100% hoch ist, dh h-100. Richten Sie den Inhalt dann zentral aus, indem Sie die Klasse " Justify-Content-Center" verwenden .
quelle
Verwenden Sie die
.my-auto
CSS-Klasse (bootsrap4) für Ihre Divquelle
In Bootstrap 4.1.3:
Dies funktionierte für mich, als ich versuchte, ein Bootstrap-Abzeichen in einem
container > row > column
neben einemh1
Titel zu zentrieren.Was funktionierte, war ein einfaches CSS:
oder
quelle