it-swarm.dev

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>

Der justify-content-center richtet das Formular horizontal aus, aber ich kann nicht herausfinden, wie es vertikal ausgerichtet wird. Ich habe versucht, align-items-center und align-self-center zu verwenden, aber es funktioniert nicht.

Was vermisse ich?

DEMO

114
user348173

Update 2019 - Bootstrap 4.3.1

Es gibt keine Notwendigkeit für zusätzliches CSS . Was bereits in Bootstrap enthalten ist, funktioniert. Stellen Sie sicher, dass die Container des Formulars die volle Höhe haben. Bootstrap 4 hat jetzt eine h-100 Klasse 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: Wenn Sie height:100% ( Prozentuale Höhe ) für ein Element verwenden, wird das Element nimmt die Höhe des Containers ein . In modernen Browsern kann vh units height:100vh; anstelle von % verwendet werden, um die gewünschte Höhe zu erhalten.

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


Horizontale Mitte:

  • text-center zum Zentrieren von display:inline Elementen und Spalteninhalten
  • mx-auto zum Zentrieren innerhalb von Flexelementen
  • offset-* oder mx-auto können zum Zentrieren von Spalten (.col-) verwendet werden
  • justify-content-center bis mittlere Spalten (col-*) innerhalb von row

Vertikal zentrieren in Bootstrap 4
Bootstrap 4-Vollbild zentriert
Bootstrap 4-Center-Eingabegruppe
Bootstrap 4 horizontal + vertikal in der Mitte im Vollbildmodus

222
Zim

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>
13
karembadawy

Sie brauchen etwas, um Ihr Formular zu zentrieren. Da Sie jedoch keine Höhe für Ihren HTML-Code und Ihren Text angegeben haben, wird nur der Inhalt umbrochen - und nicht das Ansichtsfenster. Mit anderen Worten, es gab keinen Raum, in dem das Objekt zentriert werden konnte.

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

flexbox kann ihnen 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>
6
shades3002

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

Da jetzt die Klasse Bootstrap 4 .row angezeigt wird: flex, können Sie sie einfach mit dem neuen Dienstprogramm align-self-center flexbox in jeder Spalte vertikal 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 erfahren von https://medium.com/wdstack/bootstrap-4-vertical-center-1211448a2eff

2
Paulo Pedroso

Bootstrap hat eine Textmitte, um einen Text zu zentrieren. Zum Beispiel

<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">
1
ciaran kehoe