web-dev-qa-db-fra.com

Comment centrer verticalement le conteneur dans bootstrap

Je cherche un moyen de centrer verticalement le container div à l'intérieur du jumbotron et de le placer au milieu de la page.

Le .jumbotron doit être adapté à toute la hauteur et à la largeur de l'écran, j'ai donc utilisé ce CSS.

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

Le .container div a une largeur de 1025px et devrait se trouver au milieu de la page (au centre, à la verticale).

.container{
  width:1025px;
}

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

Mon HTML est comme

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

Je souhaite donc que le jumbotron de cette page soit adapté à la hauteur et à la largeur de l'écran, ainsi que le centre du conteneur verticalement par rapport au jumbotron. Comment puis-je y arriver?

htmlcsstwitter-bootstraptwitter-bootstrap-3vertical-alignment
297
user1012181

Le chemin de la boîte flexible

L'alignement vertical est maintenant très simple grâce à l'utilisation de Disposition de la boîte flexible . De nos jours, cette méthode est supportée par ne large gamme de navigateurs Web à l’exception d’Internet Explorer 8 et 9. Il faut donc utiliser des hacks/ polyfills ou approches différentes pour IE8/9.

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

Remarque: Il est préférable d'utiliser une classe supplémentaire au lieu de modifier _.jumbotron_ pour obtenir l'alignement vertical. J'utiliserais le nom de classe _vertical-center_ par exemple.

Exemple ici (A 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é dans la démo) :

  1. Un pourcentage des valeurs de height ou _min-height_ est relatif à la height de l'élément parent, vous devez donc spécifier le height du parent explicitement.

  2. La syntaxe préfixée par le vendeur/old flexbox a été omise dans l'extrait posté en raison de sa brièveté, mais elle existe dans l'exemple en ligne.

  3. Dans certains anciens navigateurs Web tels que Firefox 9 (dans lequel j'ai testé), le conteneur flex - _.vertical-center_ dans ce cas - ne prendra pas l’espace disponible à l’intérieur du parent, nous devons donc spécifier la propriété width telle que: _width: 100%_.

  4. De plus, dans certains des navigateurs Web mentionnés ci-dessus, l'élément flex - _.container_ dans ce cas - peut ne pas apparaître au centre horizontalement. Il semble que l'application de gauche à droite margin de auto n'ait aucun effet sur l'élément flex.
    Nous devons donc l’aligner par _box-pack / justify-content_.

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

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

C’est l’ancienne réponse que j’avais écrite au moment où j’ai répondu à cette question. Cette méthode a été discutée ici et elle est supposée fonctionner dans Internet Explorer 8 et 9 également. 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: middle déclaration. Spec de W3C :

milieu
Alignez le point médian vertical de la boîte avec la ligne de base de la boîte parente plus la moitié de la hauteur x du parent.

Dans les cas où l'élément parent - _.vertical-center_ dans ce cas - a un height explicite, par hasard si nous pouvions avoir un élément enfant ayant exactement le même height du parent, be capable pour déplacer la ligne de base du parent jusqu'au milieu de l'enfant de taille normale et, de façon surprenante, aligner notre enfant souhaité dans le flux - le _.container_ - au centre verticalement.

Se rassembler

Cela dit, nous pourrions créer un élément de hauteur totale dans les pseudo-éléments _.vertical-center_ by _::before_ ou _::after_ et modifier le type par défaut display ainsi que celui de l'autre enfant. , le _.container_ à _inline-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;
}
_

WORKING DEMO.

De même, pour éviter les problèmes inattendus sur les écrans les plus petits, vous pouvez redéfinir la hauteur du pseudo-élément sur auto ou _0_ ou modifier le type display en none si nécessaire. alors:

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

MISE À JOUR DEMO

Et encore une chose:

S'il y a footer/header sections autour du conteneur, il est préférable de positionner ces éléments correctement (relative, absolute? À votre place. ) et ajoutez une valeur plus élevée _z-index_ (pour l'assurance) afin de les maintenir toujours au-dessus des autres.

550
Hashem Qolami

Mise à jour 2018

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

Utilisez simplement les classes d’utilitaire d-flex et align-items-center.

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

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

72
Zim

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

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 elle, c'est un utilitaire bootstrap-4 classe, comme si

<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

27
user9299363

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 !

8
John Slegers

Testé dans IE, Firfox et Chrome.

CSS:

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

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

HTML:

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

7
MartinPicker

pour bootstrap4 centre vertical de quelques éléments

d-flex pour les règles de flex

flex-column pour la direction verticale des éléments

justifier-contenu-centre pour le centrage

style = 'hauteur: 300px;' doit avoir pour points de réglage où le centre est calculé ou utilisé h-100 classe

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

nous avons donc la 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>
1
Ramil Gilfanov

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-cellule, w-100, h-100 et align-middle feront l'affaire

0
David Martinez Esguerra