Bootstrap 4 Vertikale und horizontale Ausrichtung zentrieren

Ich habe eine Seite, auf der nur ein Formular vorhanden ist, und ich möchte, dass das Formular in der Mitte des Bildschirms platziert wird.

<div class="container">
  <div class="row justify-content-center align-items-center">
    <form>
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>  
</div>

Das justify-content-centerrichtet das Formular horizontal aus, aber ich kann nicht herausfinden, wie es vertikal ausgerichtet werden soll. Ich habe versucht, align-items-centerund zu verwenden align-self-center, aber es funktioniert nicht.

Was vermisse ich?

DEMO

Update 2019 - Bootstrap 4.3.1

Es gibt keine Notwendigkeit für zusätzliche CSS . Was bereits in Bootstrap enthalten ist, funktioniert. Stellen Sie sicher, dass die Behälter des Formulars die volle Höhe haben . Bootstrap 4 hat jetzt eine h-100Klasse für 100% Höhe ...

Vertikale Mitte:

<div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center">
    <form class="col-12">
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>
</div>

https://www.codeply.com/go/raCutAGHre

Die Höhe des Behälters mit den zu zentrierenden Gegenständen sollte 100% betragen (oder was auch immer die gewünschte Höhe relativ zum zentrierten Gegenstand ist).

Hinweis: Bei Verwendung von height:100%( prozentuale Höhe ) für ein Element nimmt das Element die Höhe seines Containers an . In modernen Browsern können vh-Einheiten height:100vh;verwendet werden, anstatt %die gewünschte Höhe zu erhalten.

Daher können Sie HTML, body {height: 100%} festlegen oder min-vh-100stattdessen die neue Klasse für Container verwenden h-100.

Horizontale Mitte:

• text-centerum display:inlineElemente und Spalteninhalte zu zentrieren
• mx-auto zum Zentrieren innerhalb von Flexelementen
• offset-*oder mx-autokann verwendet werden, um Spalten zu zentrieren ( .col-)
• justify-content-centerzur Mittelsäulen ( col-*) im Innernrow

Vertikal ausrichten Mitte in Bootstrap 4
Bootstrap 4 Vollbild zentriert Form
Bootstrap 4 Mitte Eingabegruppe
Bootstrap 4 horizontal + vertikal Mitte Vollbild

Diese Arbeit für mich:

<section class="h-100">
  <header class="container h-100">
    <div class="d-flex align-items-center justify-content-center h-100">
      <div class="d-flex flex-column">
        <h1 class="text align-self-center p-2">item 1</h1>
        <h4 class="text align-self-center p-2">item 2</h4>
        <button class="btn btn-danger align-self-center p-2" type="button" name="button">item 3</button>
      </div>
    </div>
  </header>
</section>

flexbox kann dir helfen. Infos hier

<div class="d-flex flex-row justify-content-center align-items-center" style="height: 100px;">
    <div class="p-2">
     1
    </div>
    <div class="p-2">
     2
    </div>
</div>

Sie benötigen etwas, in das Sie Ihre Form zentrieren können. Da Sie jedoch keine Höhe für HTML und Text angegeben haben, wird nur der Inhalt umgebrochen - und nicht das Ansichtsfenster. Mit anderen Worten, es gab keinen Raum, in dem der Gegenstand zentriert werden konnte.

html, body {
  height: 100%;
}
.container, .row.justify-content-center.align-items-center {
  height: 100%;
  min-height: 100%;
}

Bootstrap hat eine Textzentrierung, um einen Text zu zentrieren. Beispielsweise

<div class="container text-center">

Sie ändern Folgendes

<div class="row justify-content-center align-items-center">

Zu dem Folgendem

<div class="row text-center">

Keiner hat für mich gearbeitet. Aber sein einziger tat es.

Da die Bootstrap 4 .row-Klasse jetzt angezeigt wird: flex, können Sie einfach das neue Flexbox-Dienstprogramm "Align-Self-Center" für jede Spalte verwenden, um sie 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>

Ich habe davon unter https://medium.com/wdstack/bootstrap-4-vertical-center-1211448a2eff erfahren

Dies funktioniert in IE 11 mit Bootstrap 4.3 . Während die anderen Antworten in meinem Fall in IE11 nicht funktionierten.

 <div class="row mx-auto justify-content-center align-items-center flex-column ">
    <div class="col-6">Something </div>
</div>

Verwenden Sie diesen Code in CSS:

.container {
    width: 600px;
    height: 350px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
}

Ich bin hier gelandet, weil ich ein Problem mit dem Bootstrap 4-Rastersystem und einer Angular * ngFor-Schleife hatte. Ich habe das Problem behoben, indem ich auf das div, das ngFor implementiert, eine Spalte mit der Begründung "content-center" angewendet habe:

<div class="row" style="border:1px solid red;">
  <div class="col d-flex justify-content-center">
    <button mat-raised-button>text</button>
  </div>
  <div *ngFor="let text of buttonText" class="col d-flex justify-content-center">
    <button mat-raised-button>text</button>
  </div>
</div>

was das Ergebnis gibt:

Aus dem Dokument (Bootsrap 4):

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around