Comment faire pour centrer aligner verticalement le conteneur dans le bootstrap

La souplesse de la boîte de façon

Alignement Vertical est désormais très simple grâce à l'utilisation de Flexible zone de mise en page. De nos jours, cette méthode est prise en charge dans un large gamme de web les navigateurs, sauf Internet Explorer 8 & 9. Par conséquent, nous aurions besoin d'utiliser certains hacks/polyfills ou différentes approches pour IE8/9.

Dans le suivant, je vais vous montrer comment faire cela dans seulement 3 lignes de texte (indépendamment de la vieille flexbox syntaxe).

Remarque: il est préférable d'utiliser une classe supplémentaire au lieu de modifier .jumbotron pour atteindre l'alignement vertical. Je voudrais utiliser vertical-center nom de la classe par exemple.

Exemple Ici (Un Miroir sur jsbin).

<div class="jumbotron vertical-center"> <!-- 
                      ^--- Added class  -->
  <div class="container">
    ...
  </div>
</div>

.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

Important notes (pris en compte dans la démo):

1. Un pourcentage valeurs de height ou min-height propriétés est par rapport à la height de l'élément parent, par conséquent, vous devez spécifier le height de la société mère explicitement.

2. Vendeur préfixé /vieux flexbox syntaxe omis dans la posté extrait en raison de la brièveté, mais qui existent en ligne dans l'exemple.

3. Dans certains vieux navigateurs web comme Firefox 9 ^{(dans lequel je l'ai testé)}, le conteneur flex - .vertical-center dans ce cas - ne pas occuper l'espace disponible à l'intérieur de la mère, donc nous avons besoin de spécifier le width propriété comme: width: 100%.

4. Également dans certains navigateurs web comme mentionné ci-dessus, le flex de l'élément .container dans ce cas - peut ne pas apparaître au centre horizontalement. Il semble que l'appliqués de gauche à droite/margin de auto n'a aucun effet sur le flex de l'élément.
   
   Nous avons donc besoin de l'aligner par box-pack /justify-content.

Pour plus de détails et/ou de l'alignement vertical des colonnes, vous pouvez vous référer à la rubrique ci-dessous:

• vertical-align avec Bootstrap 3

---

La façon traditionnelle de l'héritage pour les navigateurs web

C'est le vieux la réponse, j'ai écrit à l'époque, j'ai répondu à cette question. Cette méthode a été discuté ici et il est censé fonctionner dans Internet Explorer 8 et 9 ainsi. Je vais vous expliquer en bref:

Dans inline débit, une ligne de niveau élément peut être alignés verticalement au milieu par vertical-align: middle déclaration. Spec de W3C:

milieu

Aligner la verticale du milieu de la boîte avec la ligne de base du parent de la boîte de plus de la moitié de la hauteur d'x de la mère.

Dans les cas où le parent - .vertical-center élément dans ce cas - a explicitement height, par hasard, si nous pouvions avoir un élément enfant d'avoir exactement le même height de la mère, nous serions en mesure pour déplacer la ligne de base de la société mère au milieu de la pleine hauteur de l'enfant et, à la surprise de faire notre choix dans le flux de l'enfant - la .container aligné au centre verticalement.

Arriver tous ensemble

Cela étant dit, on pourrait créer un plein-hauteur de l'élément à l'intérieur de la .vertical-center par ::before ou ::after pseudo-éléments et également modifier la valeur par défaut display type d'elle et de l'autre enfant, le .container à inline-block.

Ensuite utiliser vertical-align: middle; pour aligner les éléments inline verticalement.

Ici, vous allez:

<div class="jumbotron vertical-center">
  <div class="container">
    ...
  </div>
</div>

.vertical-center {
  height:100%;
  width:100%;

  text-align: center;  /* align the inline(-block) elements horizontally */
  font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.vertical-center:before {    /* create a full-height inline block pseudo=element */
  content: " ";
  display: inline-block;
  vertical-align: middle;    /* vertical alignment of the inline element */
  height: 100%;
}

.vertical-center > .container {
  max-width: 100%;

  display: inline-block;
  vertical-align: middle;  /* vertical alignment of the inline element */
                           /* reset the font property */
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

TRAVAIL DE DÉMONSTRATION.

Aussi, pour éviter des problèmes inattendus dans le plus petit des écrans, vous pouvez réinitialiser la hauteur de la pseudo-élément auto ou 0 ou de changer ses display type de none si c'est nécessaire pour:

@media (max-width: 768px) {
  .vertical-center:before {
    height: auto;
    /* Or */
    display: none;
  }
}

MISE À JOUR DE LA DÉMO

Et encore une chose:

Si il y a footer/header articles autour du récipient, c'est une meilleure position que les éléments correctement (relative, absolute? à vous de voir.) et ajouter un plus z-index valeur (pour l'assurance) pour les garder toujours sur le dessus de l'autres.

ajouter Bootstrap.css puis ajouter ceci dans votre css

CSS:

   
html, body{height:100%; margin:0;padding:0}
 
.container-fluid{
  height:100%;
  display:table;
  width: 100%;
  padding: 0;
}
 
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
 
 

.centering {
  float:none;
  margin:0 auto;
}

HTML:

Now call in your page 

<div class="container-fluid">
    <div class="row-fluid">
        <div class="centering text-center">
           Am in the Center Now :-)
        </div>
    </div>
</div>

Mon préféré technique :

body {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.jumbotron {
   display: table-cell;
   vertical-align: middle;
}

---

Démo

CSS:

body {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.jumbotron {
   display: table-cell;
   vertical-align: middle;
}

HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="jumbotron vertical-center">
  <div class="container text-center">
    <h1>The easiest and powerful way</h1>
    <div class="row">
      <div class="col-md-7">
        <div class="top-bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
      </div>

      <div class="col-md-5 iPhone-features">
        <ul class="top-features">
          <li>
            <span><i class="fa fa-random simple_bg top-features-bg"></i></span>
            <p><strong>Redirect</strong><br>Visitors where they converts more.</p>
          </li>
          <li>
            <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
            <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
          </li>
          <li>
            <span><i class="fa fa-check simple_bg top-features-bg"></i></span>
            <p><strong>Check</strong><br>Constantly the status of your links.</p>
          </li>
          <li>
            <span><i class="fa fa-users simple_bg top-features-bg"></i></span>
            <p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
          </li>
          <a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
          <h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
        </ul>
      </div>
    </div>
  </div>
</div>

Voir aussi ce Violon!

pour bootstrap4 centre vertical de quelques éléments

d-flex pour flex règles

flex-colonne pour la direction verticale sur les éléments

justifier-le contenu-le centre de pour le centrage

style='height: 300px;' doit avoir pour l'ensemble des points où le centre de calc ou de l'utilisation h-100 classe

puis pour le centre horizontal div d-flex justifier-le contenu-le centre de
et certains conteneur

nous avons donc hierarhy de 3 tag: div-colonne -> div-ligne -> div conteneur

     <div class="d-flex flex-column justify-content-center bg-secondary" 
        style="height: 300px;">
        <div class="d-flex justify-content-center">
           <div class=bg-primary>Flex item</div>
        </div>
        <div class="d-flex justify-content-center">
           <div class=bg-primary>Flex item</div>
        </div>
      </div>