Come centrare verticalmente un contenitore in Bootstrap?

Il modo della scatola flessibile

L'allineamento verticale è ora molto semplice grazie all'uso del Flexible box layout. Al giorno d'oggi, questo metodo è supportato in una vasta gamma di browser web eccetto Internet Explorer 8 & 9. Perciò abbiamo bisogno di usare alcuni hack/polyfill o approcci diversi per IE8/9.

Di seguito vi mostrerò come farlo in sole 3 righe di testo (indipendentemente dalla vecchia sintassi flexbox).

Nota: è meglio usare una classe aggiuntiva invece di alterare .jumbotron per ottenere l'allineamento verticale. Io userei il nome della classe vertical-center per esempio.

[Esempio qui][5] (Un Specchio su jsbin).

<div class="jumbotron vertical-center"> 
  <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. Un valore percentuale delle proprietà height o min-height è relativo alla height dell'elemento genitore, quindi dovresti specificare esplicitamente la height del genitore.

2. Vendor prefixed / vecchia sintassi flexbox omessa nello snippet postato a causa della brevità, ma esistono nell'esempio online.

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

4. Anche in alcuni browser web, come menzionato sopra, l'elemento flex - .container in questo caso - potrebbe non apparire al centro orizzontalmente. Sembra che il margine applicato a sinistra/destra di auto non abbia alcun effetto sull'elemento flex.
   Pertanto abbiamo bisogno di allinearlo tramite box-pack / justify-content.

Per ulteriori dettagli e/o l'allineamento verticale delle colonne, potresti fare riferimento all'argomento qui sotto:

• https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3/25517025#25517025

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 spiegherò in breve:

Nel flusso in linea, un elemento di livello in linea può essere allineato verticalmente al centro con la dichiarazione vertical-align: middle. Spec da W3C:

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

Nei casi in cui il genitore - l'elemento .vertical-center in questo caso - ha un'esplicita altezza, per caso se potessimo avere un elemento figlio che ha esattamente la stessa altezza del genitore, saremmo in grado di spostare la linea di base del genitore al punto medio del figlio a tutta altezza e sorprendentemente fare il nostro figlio in-flusso desiderato - il .container - allineato al centro in verticale.

Mettere tutto insieme

Detto questo, potremmo creare un elemento a tutta altezza all'interno del .vertical-center tramite pseudo elementi ::before o ::after e cambiare anche il tipo predefinito di display di esso e dell'altro figlio, il .container a inline-block.

Poi usa vertical-align: middle; per allineare verticalmente gli elementi in linea.

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 prevenire problemi imprevisti in schermi molto piccoli, puoi reimpostare l'altezza dello pseudo-elemento su auto o 0 o cambiare il suo tipo di display a none se necessario:

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

DEMO AGGIORNATO

E un'altra cosa:

Se ci sono sezioni footer/header intorno al contenitore, è meglio posizionare quegli elementi correttamente (relativo, assoluto? dipende da te.) e aggiungere un valore di z-index più alto (per sicurezza) per tenerli sempre in cima agli altri.

aggiungi Bootstrap.css poi aggiungi questo al tuo css

Questo è il 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;
}

Ora chiama nella tua pagina

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

La mia tecnica preferita:

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

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

Demo

<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></span>
            <p><strong>Redirect</strong><br>Visitors where they converts more.</p>
          </li>
          <li>
            <span></span>
            <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
          </li>
          <li>
            <span></span>
            <p><strong>Check</strong><br>Constantly the status of your links.</p>
          </li>
          <li>
            <span></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>

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

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

Vedi anche [questo Fiddle][1]!