Bootstrap 4 Centrare l'allineamento verticale e orizzontale

163

Ho una pagina in cui esiste solo il modulo e voglio che il modulo sia posizionato al centro dello schermo.

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

I justify-content-centerallinea la forma orizzontalmente, ma non riesco a capire come allineare verticalmente. Ho provato a usare align-items-centere align-self-center, ma non funziona.

Cosa mi sto perdendo?

DEMO

— user348173
fonte

322

Aggiornamento 2019 - Bootstrap 4.3.1

Non c'è alcun bisogno di ulteriore CSS . Ciò che è già incluso in Bootstrap funzionerà. Assicurarsi che i contenitori del modulo siano a tutta altezza . Bootstrap 4 ora ha una h-100classe per il 100% di altezza ...

Centro verticale:

<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

l'altezza del contenitore con l'oggetto / i da centrare dovrebbe essere pari al 100% (o qualunque sia l'altezza desiderata rispetto all'oggetto centrato)

Nota: quando si utilizza height:100%( altezza percentuale ) su qualsiasi elemento, l'elemento prende l'altezza del suo contenitore . Nei browser moderni è height:100vh;possibile utilizzare le unità VH invece di %ottenere l'altezza desiderata.

Pertanto, è possibile impostare HTML, body {height: 100%} o utilizzare la nuova min-vh-100classe sul contenitore anziché h-100.

Centro orizzontale:

text-centercentrare display:inlineelementi e contenuto delle colonne
mx-auto per il centraggio all'interno di elementi flessibili
offset-*o mx-autopuò essere usato per centrare le colonne ( .col-)
justify-content-centera colonne centrali ( col-*) all'internorow

Centro di allineamento verticale in Bootstrap 4
Bootstrap 4 forma centrata a schermo intero
Bootstrap 4 gruppo di input centrale
Bootstrap 4 orizzontale + centro verticale a schermo intero

— Zim
fonte

È corretto utilizzare il <section>tag o si dovrebbe attenersi a <div>s per centrare il contenuto in orizzontale e in verticale nella finestra? Ho un sito esistente che ha pagine con sezioni che cambiano colore e / o immagini di sfondo.

— Adrian,

Qualsiasi figlio diretto di riga non dovrebbe essere un .col?

— Miguel Stevens,

7

Questa risposta è leggermente rotta. Dichiara esplicitamente "NON È NECESSARIO BISOGNO di CSS aggiuntivi" ma è sbagliato. Nell'esempio di codice mostra che è necessario impostare body e html su 100% in CSS al di fuori di Bootstrap 4. Senza questo CSS aggiuntivo la soluzione non funziona.

— Major Major

1

No, body e html non sono "esterni". Anche le classi CSS Bootstrap possono essere aggiunte! codeply.com/go/5ifNMHKUEy @dawn .. cosa non ha funzionato nello specifico? Il tuo commento non è utile

— Zim,

Il contenitore non aveva bisogno del 100% ma h-100 justify-content-center align-items-center funzionava

— JMP il

19

Questo lavoro per me:

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

1

Non dimenticare di aggiungere gli stili CSS:

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

— pyOwner,

15

flexbox può aiutarti. informazioni qui

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

— shades3002
fonte

10

Hai bisogno di qualcosa su cui centrare la tua forma. Ma poiché non hai specificato un'altezza per il tuo html e il tuo corpo, si limiterebbe a racchiudere il contenuto e non la finestra. In altre parole, non c'era spazio in cui centrare l'oggetto.

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

— Bram Vanroy
fonte

1

Inoltre, la h-100classe util può essere utilizzata height:100%in Bootstrap 4.

— Zim,

1

Ora consiglio di usare la soluzione di @ZimSystem perché non ha bisogno di CSS personalizzati e utilizza solo le classi fornite da Bootstrap.

— Bram Vanroy,

1

@BramVanroy come mi hai detto che ho usato la soluzione di ZimSystem ma non ha funzionato per me. la tua soluzione funziona sia con la versione 4.0.0 sia con la versione 4.1.0 anche in aggiornamento

— Sahan Pasindu Nirmal,

9

Bootstrap ha un centro di testo per centrare un testo. Per esempio

<div class="container text-center">

Si modifica quanto segue

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

al seguente

<div class="row text-center">

— ciaran kehoe
fonte

7

Nessuno ha funzionato per me. Ma il suo ha fatto.

Poiché la classe Bootstrap 4 .row è ora visualizzata: flex puoi semplicemente usare la nuova utility flexbox di auto-centraggio su qualsiasi colonna per centrarla verticalmente:

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

L'ho imparato da https://medium.com/wdstack/bootstrap-4-vertical-center-1211448a2eff

— Paulo Pedroso
fonte

2

Funziona in IE 11 con Bootstrap 4.3 . Mentre le altre risposte non funzionavano in IE11 nel mio caso.

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

— Waqas Bukhary
fonte

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>

Espandi frammento

— Levan Jintcharadze
fonte

0

Usa questo codice nei CSS:

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

— Balwinder Singh Sohi
fonte

0

Sono finito qui perché avevo un problema con il sistema di griglia Bootstrap 4 e un ciclo Angular * ngFor. L'ho risolto applicando una classe col justify-content-center al div che implementava ngFor:

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

che dà il risultato:

— Fletch
fonte

0

Dal documento (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
fonte