web-dev-qa-db-fra.com

Bootstrap 4 Alignement vertical et horizontal centré

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-center aligne le formulaire horizontalement, mais je n'arrive pas à comprendre comment l'aligner verticalement. J'ai essayé d'utiliser align-items-center et align-self-center, mais cela ne fonctionne pas.

Qu'est-ce que je rate?

DÉMO

csstwitter-bootstrapbootstrap-4centering
114
user348173

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 ou les conteneurs du formulaire ont une hauteur maximale . Bootstrap 4 a maintenant une classe h-100 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 conteneur avec le ou les éléments à centrer doit être de 100% (ou quelle que soit la hauteur souhaitée par rapport à l'élément centré)

Remarque: Lorsque vous utilisez height:100% ( pourcentage de hauteur ) 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 à la place de % pour obtenir la hauteur souhaitée.

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

Centre horizontal:

  • text-center pour centrer display:inline éléments et contenu des colonnes
  • mx-auto pour le centrage à l'intérieur des éléments flexibles
  • offset-* ou mx-auto peut être utilisé pour centrer les colonnes (.col-)
  • justify-content-center pour centrer les colonnes (col-*) à l'intérieur de row

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

222
Zim

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

Vous avez besoin de quelque chose pour centrer votre forme dans. Mais comme vous n'avez pas spécifié de hauteur pour votre html et votre corps, le contenu de ce dernier ne serait que le contenu, et non la fenêtre d'affichage. En d’autres termes, il n’y avait pas de place pour centrer l’article.

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

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

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

Depuis que la classe Bootstrap 4 .row est maintenant affichée: vous pouvez simplement utiliser le nouvel utilitaire align-self-center flexbox sur n'importe quelle colonne pour le 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 de https://medium.com/wdstack/bootstrap-4-vertical-center-1211448a2eff

2
Paulo Pedroso

Bootstrap a text-center pour centrer un texte. Par exemple

<div class="container text-center">

Vous changez le suivant

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

au suivant

<div class="row text-center">
1
ciaran kehoe