Come centrare verticalmente un contenitore in Bootstrap?

Sto cercando un modo per centrare verticalmente il containerdiv all'interno di jumbotrone impostarlo al centro della pagina.

La .jumbotrondeve essere adattato a tutta altezza e la larghezza dello schermo. Il .containerdiv ha una larghezza di 1025pxe dovrebbe trovarsi al centro della pagina (verticalmente al centro).

Voglio che questa pagina abbia il jumbotron adattato all'altezza e alla larghezza dello schermo insieme al contenitore verticalmente al centro del jumbotron. Come posso raggiungerlo?

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

Il modo box flessibile

L'allineamento verticale ora è molto semplice grazie all'uso del layout a scatola flessibile . Al giorno d'oggi, questo metodo è supportato in una vasta gamma di browser Web ad eccezione di Internet Explorer 8 e 9. Pertanto dovremmo utilizzare alcuni hack / polyfill o approcci diversi per IE8 / 9.

Di seguito ti mostrerò come farlo in solo 3 righe di testo (indipendentemente dalla vecchia sintassi del flexbox) .

Nota: è preferibile utilizzare una classe aggiuntiva anziché modificarla .jumbotronper ottenere l'allineamento verticale. Userei il vertical-centernome della classe per esempio.

Esempio qui (A Mirror su 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;
}

Note importanti (considerate nella demo) :

1. I valori percentuali di heighto min-heightproprietà sono relativi heightall'elemento padre, pertanto è necessario specificare heightesplicitamente l'elemento padre.

2. Sintassi Flexbox precedente / precedente del fornitore omessa nello snippet pubblicato per brevità, ma esiste nell'esempio online.

3. In alcuni dei vecchi browser web come Firefox 9 ^{(in cui ho testato)} , il contenitore flessibile - .vertical-centerin questo caso - non prenderà lo spazio disponibile all'interno del genitore, quindi abbiamo bisogno di specificare la widthproprietà come: width: 100%.

4. Anche in alcuni browser Web come menzionato sopra, l'elemento flessibile - .containerin questo caso - potrebbe non apparire al centro in orizzontale. Sembra che il applicato sinistra / destra margindel autonon ha alcun effetto sulla voce flex.
   Pertanto dobbiamo allinearlo con box-pack / justify-content.

Per ulteriori dettagli e / o allineamento verticale delle colonne, è possibile fare riferimento all'argomento seguente:

• allineare verticalmente con Bootstrap 3

Il modo tradizionale per i browser Web legacy

Questa è la vecchia risposta che ho scritto quando ho risposto a questa domanda. Questo metodo è stato discusso qui e dovrebbe funzionare anche in Internet Explorer 8 e 9. Lo spiego in breve:

Nel flusso inline, un elemento di livello inline può essere allineato verticalmente al centro mediante una vertical-align: middledichiarazione. Specifiche dal W3C :

middle
Allinea il punto medio verticale del riquadro con la linea di base del riquadro padre più metà dell'altezza x del padre.

Nel caso in cui il genitore - .vertical-centerelemento in questo caso - abbia un esplicito height, per ogni caso se potessimo avere un elemento figlio avente lo stesso identico heightgenitore, saremmo in grado di spostare la linea di base del genitore nel punto medio del pieno -altezza del bambino e sorprendentemente rendere il bambino desiderato in-flow - il .container- allineato al centro verticalmente.

Stare tutti insieme

Detto questo, potremmo creare un elemento a tutta altezza all'interno degli elementi .vertical-centerby ::beforeo ::afterpseudo e anche cambiare il displaytipo predefinito di esso e l'altro figlio, il .containerto inline-block.

Quindi utilizzare vertical-align: middle;per allineare gli elementi incorporati verticalmente.

Ecco qui:

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

DEMO DI LAVORO .

Inoltre, per evitare problemi imprevisti in piccoli schermi aggiuntivi, è possibile ripristinare l'altezza del pseudo-elemento a autoo 0o modificarne il displaytipo di nonese necessario in modo da:

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

DEMO AGGIORNATA

E un'altra cosa:

Se ci sono footer/ headersezioni attorno al contenitore, è meglio posizionare quegli elementi correttamente ( relative, absolute? Fino a te.) E aggiungere un z-indexvalore più alto (per sicurezza) per tenerli sempre in cima agli altri.

Aggiornamento 2019

Bootstrap 4 include flexbox, quindi il metodo di centraggio verticale è molto più semplice e non richiede CSS extra .

Basta usare le classi d-flexe align-items-centerutility.

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

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

Importante: la centratura verticale è relativa all'altezza . Il contenitore principale degli elementi che stai tentando di centrare deve avere un'altezza definita . Se vuoi l'altezza della pagina usa vh-100o min-vh-100sul genitore! Per esempio:

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

aggiungi Bootstrap.css quindi aggiungi questo al tuo 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>

In Bootstrap 4 :

per centrare il bambino in orizzontale , utilizzare la classe bootstrap-4:

justify-content-center

per centrare il bambino in verticale , utilizzare la classe bootstrap-4:

 align-items-center

ma ricorda di non dimenticare di usare la classe d-flex con queste è una classe di utilità bootstrap-4, in questo modo

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

Nota: assicurarsi di aggiungere utilità bootstrap-4 se questo codice non funziona

So che non è la risposta diretta a questa domanda, ma può aiutare qualcuno

La mia tecnica preferita:

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

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

dimostrazione

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>

Vedi anche questo violino !

Testato su IE, Firefox e 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>

Trovato su https://css-tricks.com/centering-css-complete-guide/

per bootstrap4 centro verticale di pochi elementi

d-flex per regole flex

colonna flessibile per la direzione verticale degli oggetti

justify-content-center per il centraggio

style = 'height: 300px;' deve avere dei set point in cui il centro deve essere calc o utilizzare la classe h-100

quindi per il centro orizzontale div d-flex justify-content-center e alcuni container

quindi abbiamo gerarchia di 3 tag: 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> 

Se stai usando Bootstrap 4, devi solo aggiungere 2 div:

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

Le classi: d-table, d-table-cell, w-100, h-100 e align-middle faranno il lavoro

Dare la classe contenitore

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

Dai il div che si trova all'interno del contenitore:

align-content: center;

Tutto il contenuto all'interno di questo div verrà mostrato al centro della pagina.

Ecco il modo in cui sto usando per allineare il contenuto verticalmente - top / center / bottom con bootstrap 3 righe. Bootstrap 3 colonne con la stessa altezza e allineate verticalmente.

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

Ecco una demo di JSFiddle .