Comment centrer aligner 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é à la pleine hauteur et largeur de l'écran donc j'ai utilisé ce CSS.

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

le .container div a une largeur de 1025px et doit être au milieu de la page (centre vertical).

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

donc je veux que cette page ait le jumbotron adapté à la hauteur et la largeur de l'écran avec le conteneur centre verticalement au jumbotron. Comment puis-je l'atteindre?

256
demandé sur Hashem Qolami 2014-03-05 15:36:06
la source

7 ответов

La souplesse de la boîte de façon

vertical alignment est maintenant très simple par l'utilisation de Flexible box layout . De nos jours, cette méthode est prise en charge dans un large gamme de navigateurs Web 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 après je vais vous montrer comment faire cela dans seulement 3 lignes du texte (indépendamment de l'ancienne syntaxe de flexbox) .

Note: 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. a pourcentage les valeurs des propriétés height ou "15198090920" sont relatives au height de l'élément parent, donc vous devez préciser le height de la société mère explicitement.

  2. vendeur préfixé / ancienne syntaxe flexbox omis dans l'extrait affiché en raison de la brièveté, mais existent dans l'exemple en ligne.

  3. dans certains des vieux 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 width de la propriété comme: width: 100% .

  4. également dans certains navigateurs web comme mentionné ci - dessus, l'élément flex - .container dans ce cas-peut ne pas apparaître au centre horizontalement. Il semble que l'application gauche / droite margin de auto n'a aucun effet sur l'article flex.

    Nous devons donc l'Aligner par box-pack / justify-content .

pour d'autres détails et / ou alignement vertical des colonnes, vous pouvez vous référer au sujet ci-dessous:


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

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 il est censé fonctionner dans Internet Explorer 8 et 9 aussi. Je vais l'expliquer en bref:

dans l'écoulement en ligne, un élément de niveau en ligne peut être aligné verticalement vers le milieu par la déclaration vertical-align: middle . Spec from W3C :

moyen

Aligner le point médian vertical de la boîte avec la ligne de base de la boîte mère plus la moitié la hauteur en x du parent.

dans les cas où le parent - .vertical-center élément dans ce cas - a un explicite height , par n'importe quel hasard si nous pourrions avoir un élément enfant ayant la même exacte height du parent, nous serions en mesure de déplacer la ligne de base du parent au milieu de l'enfant de pleine hauteur et étonnamment faire notre enfant in-flow désiré-le .container - aligné au centre verticalement.

Arriver tous ensemble

cela étant dit, Nous pourrions créer un élément Pleine hauteur dans le .vertical-center par ::before ou ::after pseudo éléments et aussi changer le défaut display type de celui-ci et l'autre enfant, le .container à inline-block .

puis utilisez vertical-align: middle; pour aligner les éléments en ligne 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;
}

"15191510920 DE TRAVAIL" DÉMO .

aussi, pour prévenir les problèmes inattendus dans les petits écrans supplémentaires, vous pouvez réinitialiser la hauteur du pseudo-élément à auto ou 0 ou changer son display type à none si nécessaire ainsi:

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

MISE À JOUR DE LA DÉMO

et un de plus chose:

S'il y a des sections footer / header autour du conteneur, il est préférable de bien positionner les éléments ( relative , absolute ? jusqu'à vous.) et ajouter une valeur plus élevée z-index (pour l'assurance) pour les garder toujours sur le dessus des autres.

495
répondu Hashem Qolami 2017-05-23 15:26:27
la source

ajouter Bootstrap.CSS puis ajouter 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>
48
répondu Rontuku 2014-12-16 11:26:15
la source

mise à jour 2018

Bootstrap 4 comprend flexbox, de sorte que la méthode de centrage vertical est beaucoup plus facile et n'a pas besoin de plus CSS .

utilisez simplement les classes d'utilité 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

35
répondu Zim 2018-02-08 13:33:16
la source

In Bootstrap 4 :

à centrer l'enfant horizontalement , utiliser bootstrap-4 classe:

justify-content-center

à centrer l'enfant verticalement , utiliser bootstrap-4 classe:

 align-items-center

mais n'oubliez pas d'utiliser d-flex Classe avec ces c'est une classe utilitaire bootstrap-4, comme

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

Note: 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 elle peut aider quelqu'un

14
répondu 2018-02-02 14:44:46
la source

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 !

7
répondu John Slegers 2016-05-19 14:26:48
la source

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>

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

5
répondu MartinPicker 2017-07-20 18:26:49
la source

voici le chemin que j'utilise pour aligner le contenu verticalement-Haut/centre / Bas avec bootstrap 3 lignes:

Voici la démo de fiddle: js fiddle

Bootstrap 3 columns with same height and vertically aligned - 

/* 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 -->
-2
répondu Mohan Dere 2016-10-20 19:47:47
la source