Comment centrer verticalement un conteneur dans Bootstrap?

Je cherche un moyen de centrer verticalement le containerdiv à l'intérieur dujumbotron et de le placer au milieu de la page.

Le .jumbotrondoit être adapté à toute la hauteur et la largeur de l'écran. Le .containerdiv a une largeur de1025px et doit être au milieu de la page (verticalement au centre).

Je veux que cette page ait le jumbotron adapté à la hauteur et à la largeur de l'écran avec le conteneur verticalement centré sur le jumbotron. Comment puis-je y parvenir?

.jumbotron {
  height:100%;
  width:100%;
}
.container {
  width:1025px;
}
.jumbotron .container {
  max-width: 100%;
} 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
    <div class="container text-center">
        <h1>The easiest and powerful way</h1>
        <div class="row">
            <div class="col-md-7">
                 <div class="top-bg"></div>
            </div>

            <div class="col-md-5 iPhone-features" style="margin-left:-25px;">
                <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>

La manière de boîte flexible

L'alignement vertical est désormais très simple grâce à l'utilisation de la disposition de boîte flexible . De nos jours, cette méthode est prise en charge dans un large éventail de navigateurs Web, à l'exception d'Internet Explorer 8 et 9. Par conséquent, nous aurions besoin d'utiliser des hacks / polyfills ou différentes approches pour IE8 / 9.

Dans ce qui suit, je vais vous montrer comment faire cela en seulement 3 lignes de texte (quelle que soit l'ancienne syntaxe flexbox) .

Remarque: il est préférable d'utiliser une classe supplémentaire au lieu de la modifier .jumbotronpour obtenir l'alignement vertical. J'utiliserais le vertical-centernom de 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 (Considéré comme dans la démo) :

1. Un pourcentage des valeurs heightou des min-heightpropriétés est relatif à l' heightélément parent, vous devez donc spécifier heightexplicitement le parent.

2. La syntaxe Flexbox préfixée / ancienne du fournisseur a été omise dans l'extrait publié en raison de la brièveté, mais existe dans l'exemple en ligne.

3. Dans certains des anciens navigateurs tels que Firefox 9 ^{(dans lequel je l' ai testé)} , le conteneur flexible - .vertical-centerdans ce cas - ne prendra pas l'espace disponible à l' intérieur du parent, il faut donc préciser la widthpropriété comme: width: 100%.

4. Dans certains navigateurs Web, comme mentionné ci-dessus, l'élément flexible - .containerdans ce cas - peut ne pas apparaître horizontalement au centre. Il semble que le APPLIED gauche / droite marginde autone pas d'effet sur l'élément flexible.
   Par conséquent, nous devons l'aligner sur box-pack / justify-content.

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

• alignement vertical avec Bootstrap 3

La manière traditionnelle pour les navigateurs Web hérités

C'est l'ancienne réponse que j'ai écrite au moment où j'ai répondu à cette question. Cette méthode a été discutée ici et elle est censée fonctionner également dans Internet Explorer 8 et 9. Je vais l'expliquer en bref:

Dans le flux en ligne, un élément de niveau en ligne peut être aligné verticalement au milieu par vertical-align: middledéclaration. Spécifications du W3C :

milieu
Aligne le milieu vertical de la boîte avec la ligne de base de la boîte parent plus la moitié de la hauteur x du parent.

Dans les cas où le parent - l' .vertical-centerélément dans ce cas - a un explicite height, par hasard si nous pouvions avoir un élément enfant ayant exactement la même chose que heightle parent, nous serions en mesure de déplacer la ligne de base du parent au milieu du plein -hauteur enfant et étonnamment faire de notre enfant entrant souhaité - le.container - aligné verticalement au centre.

Se rassembler

Cela étant dit, nous pourrions créer un élément pleine hauteur dans les éléments .vertical-centerby ::beforeou ::afterpseudo et également changer le displaytype par défaut de celui-ci et de l'autre enfant, le .containertoinline-block .

Utilisez ensuite vertical-align: middle;pour aligner les éléments en ligne verticalement.

Voici:

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

DÉMO DE TRAVAIL .

De plus, pour éviter des problèmes inattendus dans de très petits écrans, vous pouvez réinitialiser la hauteur du pseudo-élément sur autoou 0ou changer son displaytype en nonesi nécessaire afin:

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

DÉMO À JOUR

Et encore une chose:

S'il y a des footer/ headersections autour du conteneur, il est préférable de positionner ces éléments correctement ( relative, absolute? À vous.) Et d'ajouter une z-indexvaleur plus élevée (pour l'assurance) pour les garder toujours au-dessus des autres.

Mise à jour 2019

Bootstrap 4 inclut Flexbox, donc la méthode de centrage vertical est beaucoup plus facile et ne nécessite pas de CSS supplémentaire .

Utilisez simplement les classes utilitaires d-flexet align-items-center.

<div class="jumbotron d-flex align-items-center">
  <div class="container">
    content
  </div>
</div>

http://www.codeply.com/go/ui6ABmMTLv

Important: le centrage vertical est relatif à la hauteur . Le conteneur parent des éléments que vous essayez de centrer doit avoir une hauteur définie . Si vous voulez utiliser la hauteur de la page vh-100ou min-vh-100sur le parent! Par exemple:

<div class="jumbotron d-flex align-items-center min-vh-100">
  <div class="container text-center">
    I am centered vertically
  </div>
</div>

ajoutez Bootstrap.css puis ajoutez ceci à votre 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;
}

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>

Dans Bootstrap 4 :

pour centrer l'enfant horizontalement , utilisez la classe bootstrap-4:

justify-content-center

pour centrer l'enfant verticalement , utilisez la classe bootstrap-4:

 align-items-center

mais rappelez-vous n'oubliez pas d'utiliser la classe d-flex avec ceux-ci, c'est une classe utilitaire bootstrap-4, comme ça

<div class="d-flex justify-content-center align-items-center" style="height:100px;">
    <span class="bg-primary">MIDDLE</span>    
</div>

Remarque: assurez-vous d'ajouter des utilitaires bootstrap-4 si ce code ne fonctionne pas

Je sais que ce n'est pas la réponse directe à cette question, mais cela peut aider quelqu'un

Ma technique préférée:

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

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

Démo

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

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

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

Testé dans IE, Firefox et Chrome.

.parent-container {
    position: relative;
    height:100%;
    width: 100%;
}

.child-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<div class="parent-container">
    <div class="child-container">
        <h2>Header Text</h2>
        <span>Some Text</span>
    </div>
</div>

Trouvé sur https://css-tricks.com/centering-css-complete-guide/

pour bootstrap4 centre vertical de quelques articles

d-flex pour les règles flex

colonne flexible pour la direction verticale sur les articles

centre de contenu de justification pour le centrage

style = 'height: 300px;' doit avoir pour les points de consigne où le centre doit être calculé ou utiliser la classe h-100

puis pour le centre horizontal div d-flex justifier-contenu-centre et un certain conteneur

nous avons donc une hiérarchie de 3 balises: div-column -> div-row -> div-container

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

Si vous utilisez Bootstrap 4, il vous suffit d'ajouter 2 divs:

.jumbotron{
  height:100%;
  width:100%;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>    
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<body>
  <div class="jumbotron">
    <div class="d-table w-100 h-100">
      <div class="d-table-cell w-100 h-100 align-middle">
        <h5>
          your stuff...
        </h5>
        <div class="container">
          <div class="row">
            <div class="col-12">
              <p>
                More stuff...
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Les classes: d-table, d-table-cell, w-100, h-100 et align-middle feront l'affaire

Donnez la classe de conteneur

.container{
    height: 100vh;
    width: 100vw;
    display: flex;
}

Donnez le div qui est à l'intérieur du conteneur:

align-content: center;

Tout le contenu de cette div apparaîtra au milieu de la page.

Voici la façon dont j'utilise pour aligner le contenu verticalement - haut / centre / bas avec bootstrap 3 lignes. Bootstrap 3 colonnes de même hauteur et alignées verticalement.

/* columns of same height styles */

.row-full-height {
  height: 100%;
}
.col-full-height {
  height: 100%;
  vertical-align: middle;
}
.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}
.col-xs-height {
  display: table-cell;
  float: none !important;
}

@media (min-width: 768px) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 992px) {
  .col-md-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 1200px) {
  .col-lg-height {
    display: table-cell;
    float: none !important;
  }
}
/* vertical alignment styles */

.col-top {
  vertical-align: top;
}
.col-middle {
  vertical-align: middle;
}
.col-bottom {
  vertical-align: bottom;

<div class="container">

<h2>Demo 1</h2>
<div class="row">
  <div class="row-same-height">
    <div class="col-xs-3 col-xs-height">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra. Integer vestibulum feugiat malesuada. Proin a felis ut libero vestibulum fermentum ut sit amet est. Morbi placerat eget lacus sed sagittis. Nullam eu elit gravida arcu viverra facilisis. Quisque laoreet enim neque, ut consequat sem tincidunt at. Fusce lobortis scelerisque libero, eget vulputate neque. </div>
    <div class="col-xs-3 col-xs-height col-top">2st column</div>
    <div class="col-xs-3 col-xs-height col-middle">3st column</div>
    <div class="col-xs-3 col-xs-height col-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra.</div>
  </div>
</div><!-- ./row -->
</div><!-- ./container -->

Voici une démo JSFiddle .