Alignement vertical et horizontal du centre Bootstrap 4

163

J'ai une page où seul le formulaire existe et je veux que le formulaire soit placé au centre de l'écran.

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

Le justify-content-centeraligne le formulaire horizontalement, mais je ne peux pas comprendre comment l'aligner verticalement. J'ai essayé d'utiliser align-items-centeret align-self-center, mais cela ne fonctionne pas.

Qu'est-ce que je rate?

DEMO

— utilisateur348173
source

323

Mise à jour 2019 - Bootstrap 4.3.1

Il n'y a pas besoin de CSS supplémentaire . Ce qui est déjà inclus dans Bootstrap fonctionnera. Assurez-vous que le (s) conteneur (s) du formulaire sont de pleine hauteur . Bootstrap 4 a maintenant une h-100classe pour 100% de hauteur ...

Centre vertical:

<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

la hauteur du contenant avec le ou les articles au centre doit être de 100% (ou quelle que soit la hauteur souhaitée par rapport à l'article centré)

Remarque: lorsque vous utilisez height:100%( hauteur en pourcentage ) sur n'importe quel élément, l'élément prend la hauteur de son conteneur . Dans les navigateurs modernes, les unités vh height:100vh;peuvent être utilisées au lieu d' %obtenir la hauteur désirée.

Par conséquent, vous pouvez définir html, body {height: 100%} ou utiliser la nouvelle min-vh-100classe sur le conteneur au lieu de h-100.

Centre horizontal:

text-centerpour centrer les display:inlineéléments et le contenu de la colonne
mx-auto pour centrer à l'intérieur des éléments flexibles
offset-*ou mx-autopeut être utilisé pour centrer les colonnes ( .col-)
justify-content-centerpour centrer les colonnes ( col-*) à l'intérieurrow

Centre d'alignement vertical dans Bootstrap 4
Bootstrap 4 forme centrée plein écran
Bootstrap 4 groupe d'entrée central
Bootstrap 4 horizontal + centre vertical plein écran

— Zim
source

Est-il acceptable d'utiliser la <section>balise ou faut-il s'en tenir à <div>s pour centrer le contenu horizontalement et verticalement dans la fenêtre? J'ai un site existant qui contient des pages avec des sections qui changent de couleur et / ou d'images d'arrière-plan.

— Adrian le

Un enfant direct de ligne ne devrait-il pas être un .col?

— Miguel Stevens le

7

Cette réponse est légèrement cassée. Vous déclarez explicitement "il n'y a PAS BESOIN de CSS supplémentaire" mais c'est faux. Dans votre exemple de code, il montre que vous devez définir body et html à 100% en CSS en dehors de Bootstrap 4. Sans ce CSS supplémentaire, votre solution ne fonctionne pas.

— Major Major

1

Non, body et html ne sont pas "extérieurs" .. Des classes CSS Bootstrap peuvent aussi leur être ajoutées! codeply.com/go/5ifNMHKUEy @dawn .. qu'est-ce qui n'a pas fonctionné? Votre commentaire n'est pas utile.

— Zim

Le conteneur n'a pas besoin de 100% mais a h-100 justify-content-center align-items-centerfonctionné

— JMP

19

Ce travail pour moi:

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

1

N'oubliez pas d'ajouter des styles css:

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

— pyOwner

15

flexbox peut vous aider. info ici

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

— teintes3002
source

10

Vous avez besoin de quelque chose pour centrer votre formulaire. Mais comme vous n'avez pas spécifié de hauteur pour votre html et votre corps, cela envelopperait simplement le contenu - et non la fenêtre. En d'autres termes, il n'y avait pas de place pour centrer l'élément.

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

— Bram Vanroy
source

1

En outre, la h-100classe util peut être utilisée height:100%dans Bootstrap 4.

— Zim

1

Je conseille maintenant d'utiliser la solution de @ZimSystem car elle n'a pas besoin de CSS personnalisé et n'utilise que les classes fournies par Bootstrap.

— Bram Vanroy

1

@BramVanroy comme vous l'avez dit, j'ai utilisé la solution de ZimSystem mais cela n'a pas fonctionné pour moi. votre solution fonctionne également sur les mises à jour de la version 4.0.0 et 4.1.0

— Sahan Pasindu Nirmal

9

Bootstrap a un centre de texte pour centrer un texte. Par exemple

<div class="container text-center">

Vous modifiez ce qui suit

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

au suivant

<div class="row text-center">

— ciaran kehoe
source

7

Aucun n'a fonctionné pour moi. Mais le sien l'a fait.

Puisque la classe Bootstrap 4 .row est maintenant display: flex, vous pouvez simplement utiliser le nouvel utilitaire flexbox align-self-center sur n'importe quelle colonne pour la centrer verticalement:

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

Je l'ai appris sur https://medium.com/wdstack/bootstrap-4-vertical-center-1211448a2eff

— Paulo Pedroso
source

2

Cela fonctionne dans IE 11 avec Bootstrap 4.3 . Alors que les autres réponses ne fonctionnaient pas dans IE11 dans mon cas.

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

— Waqas Bukhary
source

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>

Développer l'extrait

— Levan Jintcharadze
source

0

Utilisez ce code en CSS:

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

— Balwinder Singh Sohi
source

0

Je me suis retrouvé ici parce que j'avais un problème avec le système de grille Bootstrap 4 et une boucle Angular * ngFor. Je l'ai corrigé en appliquant une classe col justify-content-center à la div implémentant le 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>

ce qui donne le résultat:

— Fletch
source

0

De la doc (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
source