Ich versuche, meinen Container mit Bootstrap 4 in der Mitte der Seite zu zentrieren.
Important!Das vertikale Zentrum ist relativ zur Höhe des übergeordneten Elements
Wenn das übergeordnete Element des Elements, das Sie zentrieren möchten, nicht definiert ist height, none der vertikalen Zentrierlösung funktioniert!
Nun auf vertikale Zentrierung in Bootstrap 4 ...
Sie können die neuen Dienstprogramme flexbox & size verwenden, um die Variable container
und display: flex
zu ändern. Diese Optionen erfordern kein zusätzliches CSS (außer dass Höhe des Containers (dh: html, body) 100% sein muss).
Option 1 align-self-center
bei 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
bei übergeordneter Flexbox (.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
bei übergeordneter Flexbox (.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 zum vertikalen Zentrieren von Bootstrap 4
Da Bootstrap 4 nun Flexbox und andere Dienstprogramme anbietet, gibt es viele Ansätze für die vertikale Ausrichtung. http://www.codeply.com/go/WG15ZWC4lf
1 - Vertikales Zentrum mit automatischen Rändern:
Eine andere Möglichkeit, vertikal zu zentrieren, ist my-auto
. Dadurch wird das Element in seinem Container zentriert. Zum Beispiel macht h-100
die ganze Höhe der Zeile und my-auto
zentriert die Spalte col-sm-12
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 automatischen Rändern Demo
my-auto
steht für Ränder auf der vertikalen Y-Achse und entspricht:
margin-top: auto;
margin-bottom: auto;
2 - Vertikales Zentrum mit Flexbox:
Da Bootstrap 4 .row
jetzt display:flex
ist, können Sie 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
für den gesamten .row
, um alle col-*
in der Zeile vertikal zentrieren zu lassen ...
<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>
Vertikale vertikale Spalte mit unterschiedlicher Höhe Demo
Siehe dieses Q/A zum Zentrieren, aber gleiche Höhe beibehalten
3 - Vertical Center Using Display Utils:
Bootstrap 4 verfügt über Anzeige-Utils , die für display:table
, display:table-cell
, display:inline
usw. verwendet werden können. Diese können mit den vertikalen Ausrichtungs-Utils zum Ausrichten von Inline-, Inline-Block- oder Tabellenzellenelementen verwendet werden.
<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
Mehr Beispiele
Vertikales Mittelbild in <div>
Senkrechte Mittellinie in .container
Vertikale Mitte und Unterseite in <div>
Vertikales zentriertes Kind im Elternteil
Vertikales Zentrum Vollbild-Jumbotron
Wichtig!Habe ich Höhe erwähnt?
Beachten Sie, dass die vertikale Zentrierung relativ zu dem Element Höhe des übergeordneten Elements ist. Wenn Sie die gesamte Seite zentrieren möchten, sollte dies in den meisten Fällen Ihr CSS sein ...
body,html {
height: 100%;
}
Oder verwenden Sie min-height: 100vh
für den übergeordneten Container. Wenn Sie ein untergeordnetes Element innerhalb des übergeordneten Elements zentrieren möchten. Das übergeordnete Element muss ein definiertes height haben.
Siehe auch:
Vertikale Ausrichtung in Bootstrap 4
Bootstrap 4 Vertikale und horizontale Ausrichtung in der Mitte
sie können den Container vertikal ausrichten, indem Sie den übergeordneten Container flexibel gestalten und align-items:center
hinzufügen:
body {
display:flex;
align-items:center;
}
Folgende Bootstrap-4-Klassen haben mir geholfen, dieses Problem zu lösen
<div class="col text-center justify-content-center align-self-center">
<img width=3rem src=".." alt="...">
</div>
.jumbotron {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Da keiner der oben genannten Punkte für mich funktioniert hat, füge ich eine weitere Antwort hinzu.
Ziel: Um ein div auf einer Seite vertikal und horizontal auszurichten, verwenden Sie die Bootstrap 4-Flexbox-Klassen.
Schritt 1: Setzen Sie Ihr äußerstes div auf eine Höhe von 100vh
. Dadurch wird die Höhe auf 100% der Veiwport-Höhe festgelegt. Wenn Sie dies nicht tun, funktioniert nichts anderes. Wenn Sie die Höhe auf 100%
setzen, ist dies nur relativ zum übergeordneten Element. Wenn das übergeordnete Element nicht die volle Höhe des Ansichtsfensters ist, funktioniert nichts. Im folgenden Beispiel habe ich den Body auf 100vh gesetzt.
Schritt 2: Legen Sie den Container div mit der Klasse d-flex
als Flexbox-Container fest.
Schritt 3: Mit der justify-content-center
-Klasse horizontal horizontal zentrieren.
Schritt 4: div vertikal mit dem align-items-center
zentrieren
Schritt 5: Führen Sie die Seite aus, und zeigen Sie Ihr vertikal und horizontal zentriertes Div an.
Beachten Sie, dass es keine spezielle Klasse gibt, die auf das zentrierte div (das untergeordnete div) selbst gesetzt werden muss.
<body style="background-color:#f2f2f2; height:100vh;">
<div class="h-100 d-flex justify-content-center align-items-center">
<div style="height:600px; background-color:white; width:600px;">
</div>
</div>
</body>
Verwenden Sie in Bootstrap 4 (Beta) align-middle
. Siehe Bootstrap 4-Dokumentation zur vertikalen Ausrichtung :
Ändern Sie die Ausrichtung von Elementen mit der Vertikal-Ausrichtung Dienstprogramme. Bitte beachten Sie, dass sich die vertikale Ausrichtung nur auf inline, .__ auswirkt. Inline-Block -, Inline-Table - und Table Cell - Elemente.
Wählen Sie aus
.align-baseline
,.align-top
,.align-middle
,.align-bottom
,.align-text-bottom
und.align-text-top
nach Bedarf.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row align-items-center justify-content-center" style="height:100vh;">
<div>Center Div Here</div>
</div>
</div>
</body>
</html>
Ich habe es so gemacht mit Bootstrap 4.3.1
:
<div class="d-flex vh-100">
<div class="d-flex w-100 justify-content-center align-self-center">
I'm in the middle
</div>
</div>
Ich habe alle Antworten ausprobiert, aber hier ist der Unterschied zwischen h-100 und vh-100 Hier ist meine Lösung:
<div className='container vh-100 d-flex align-items-center col justify-content-center'>
<div className="">
...
</div>
</div >
In Bootstrap 4.1.3:
Dies funktionierte für mich, als ich versuchte, ein Bootstrap-Badge in einem container > row > column
neben einem h1
-Titel zu zentrieren.
Was funktionierte, war ein paar einfache CSS:
.my-valign-center {
vertical-align: 50%;
}
oder
<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>
<div class="col-lg-5 col-sm-5 offset-1 d-flex">
<div class="offer-txt justify-content-center align-self-center">
<span class="inner-title">Our Offer</span>
<h2 class="section-title">Today’s Special </h2>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly.</p>
</div>
</div>