wake-up-neo.com

Vertikales Ausrichtungszentrum in Bootstrap 4

Ich versuche, meinen Container mit Bootstrap 4 in der Mitte der Seite zu zentrieren.

htmlcsstwitter-bootstrapflexboxbootstrap-4
166
canaan seaton

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>

 enter image description here

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:

 vertical center grid columns

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

374
Zim

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;
}

Aktualisierter Stift

13
Pete

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>
9
Manoj
.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
6
Nate Beers

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>
4
Greg Gum

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.

3
vallismortis
<!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>
1
Anu

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>
1
webjay

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 >
1
AlexNikonov

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>
0
phyatt
<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>

 enter image description here

0
Tariqul_Islam