Bootstrap 4 Vertikale und horizontale Ausrichtung zentrieren

161

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

— user348173
quelle

322

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

— Zim
quelle

Ist es in Ordnung, das <section>Tag zu verwenden, oder sollte man sich an <div>s halten, um Inhalte horizontal und vertikal im Ansichtsfenster zu zentrieren? Ich habe eine vorhandene Site mit Seiten mit Abschnitten, deren Farbe und / oder Hintergrundbilder geändert werden.

— Adrian

Sollte kein direktes Kind der Reihe ein .col sein?

— Miguel Stevens

7

Diese Antwort ist leicht gebrochen. Sie geben ausdrücklich an, dass kein zusätzliches CSS erforderlich ist, aber das ist falsch. In Ihrem Codebeispiel wird angezeigt, dass Sie body und html außerhalb von Bootstrap 4 auf 100% in CSS einstellen müssen. Ohne dieses zusätzliche CSS funktioniert Ihre Lösung nicht.

— Major Major

1

Nein, body und html sind nicht "außerhalb". Bootstrap-CSS-Klassen können ebenfalls hinzugefügt werden! codeply.com/go/5ifNMHKUEy @dawn .. was genau hat nicht funktioniert? Ihr Kommentar ist nicht hilfreich.

— Zim

Container brauchte nicht 100%, h-100 justify-content-center align-items-centerfunktionierte aber

— JMP

18

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>

— Karembadawy
quelle

1

Vergessen Sie nicht,

<style type="text/css">     html, body{       height: 100%;     }      .full-page{       height: 100vh;       width: 100vw;     } </style>

— CSS-

15

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>

— Schatten3002
quelle

10

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

— Bram Vanroy
quelle

1

Die h-100util-Klasse kann auch height:100%in Bootstrap 4 verwendet werden.

— Zim

1

Ich empfehle jetzt, die @ ZimSystem-Lösung zu verwenden, da sie kein benutzerdefiniertes CSS benötigt und nur die von Bootstrap bereitgestellten Klassen verwendet.

— Bram Vanroy

1

@BramVanroy Wie Sie sagten, habe ich die Lösung von ZimSystem verwendet, aber es hat bei mir nicht funktioniert. Ihre Lösung, die sowohl auf Version 4.0.0 als auch auf Version 4.1.0

— funktioniert, wird

9

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">

— Ciaran Kehoe
quelle

7

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

— Paulo Pedroso
quelle

2

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>

— Waqas Bukhary
quelle

0

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="col-12 border border-info">
          <div class="d-flex justify-content-center align-items-center" style="height: 100px">
              <a href="#" class="btn btn-dark">Transfer</a>
              <a href="#" class="btn btn-dark mr-2 ml-2">Replenish</a>
              <a href="#" class="btn btn-dark mr-3">Account Details</a>
          </div>
    </div>

Erweitern Sie das Snippet

— Levan Jintcharadze
quelle

0

Verwenden Sie diesen Code in CSS:

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

— Balwinder Singh Sohi
quelle

0

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:

— Befiedern
quelle

0

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

— Mohamed Allal
quelle