¿Cómo centrar verticalmente un contenedor en Bootstrap?

Estoy buscando una manera de centrar verticalmente el containerdiv dentro del jumbotrony establecerlo en el medio de la página.

El .jumbotrontiene que adaptarse a la altura y ancho total de la pantalla. El .containerdiv tiene un ancho de 1025pxy debe estar en el medio de la página (centro vertical).

Quiero que esta página tenga el jumbotron adaptado a la altura y el ancho de la pantalla junto con el contenedor verticalmente al centro del jumbotron. ¿Cómo puedo lograrlo?

.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 forma de caja flexible

La alineación vertical ahora es muy simple mediante el uso del diseño de caja flexible . Hoy en día, este método es compatible con una amplia gama de navegadores web, excepto Internet Explorer 8 y 9. Por lo tanto, necesitaríamos usar algunos hacks / polyfills o diferentes enfoques para IE8 / 9.

A continuación, le mostraré cómo hacerlo en solo 3 líneas de texto (independientemente de la sintaxis anterior de flexbox) .

Nota: es mejor usar una clase adicional en lugar de alterar .jumbotronpara lograr la alineación vertical. Usaría el vertical-centernombre de la clase, por ejemplo.

Ejemplo aquí (Un espejo en 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;
}

Notas importantes (consideradas en la demostración) :

1. Un valor porcentual de heighto min-heightpropiedades es relativo al del heightelemento padre, por lo tanto, debe especificar heightexplícitamente el del padre.

2. La sintaxis del proveedor con prefijo / anterior se omitió en el fragmento publicado debido a la brevedad, pero existe en el ejemplo en línea.

3. En algunos de los viejos navegadores web como Firefox 9 ^{(en la que he probado)} , el contenedor Flex - .vertical-centeren este caso - no tomará el espacio disponible dentro de la matriz, por lo tanto, tenemos que especificar la widthpropiedad como: width: 100%.

4. También en algunos navegadores web como se mencionó anteriormente, el elemento flexible, .containeren este caso, puede no aparecer en el centro horizontalmente. Parece que la aplicación izquierda / derecha marginde autono tiene ningún efecto en el elemento flexible.
   Por lo tanto, necesitamos alinearlo por box-pack / justify-content.

Para obtener más detalles y / o alineación vertical de columnas, puede consultar el siguiente tema:

• alineación vertical con Bootstrap 3

La forma tradicional de los navegadores web heredados

Esta es la vieja respuesta que escribí cuando respondí esta pregunta. Este método se ha discutido aquí y se supone que también funciona en Internet Explorer 8 y 9. Lo explicaré brevemente:

En el flujo en línea, un elemento de nivel en línea se puede alinear verticalmente al medio mediante vertical-align: middledeclaración. Especificaciones del W3C :

medio
Alinee el punto medio vertical del cuadro con la línea base del cuadro principal más la mitad de la altura x del elemento primario.

En los casos en que el .vertical-centerelemento primario ( elemento en este caso) tiene un elemento explícito height, por casualidad si pudiéramos tener un elemento secundario que tenga exactamente el mismo elemento heightprimario, podríamos mover la línea base del elemento primario al punto medio del total de altura alta y sorprendentemente hacer que nuestro niño en flujo deseado - el .container- se alinee verticalmente al centro.

Todos juntos

Dicho esto, podríamos crear un elemento de altura completa dentro de .vertical-centerby ::beforeo ::afterpseudoelementos y también cambiar el displaytipo predeterminado y el otro elemento secundario, .containerto inline-block.

Luego, use vertical-align: middle;para alinear los elementos en línea verticalmente.

Aqui tienes:

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

Además, para evitar problemas inesperados en pantallas pequeñas adicionales, puede restablecer la altura de la pseudo-elemento a autoo 0o cambiar su displaytipo a nonesi es necesario por lo que:

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

DEMO ACTUALIZADA

Y una cosa más:

Si hay footer/ headersecciones alrededor del contenedor, es mejor colocar esos elementos correctamente ( relative, absolute? Depende de usted) y agregar un z-indexvalor más alto (para garantizar) para mantenerlos siempre encima de los demás.

Actualización 2019

Bootstrap 4 incluye flexbox, por lo que el método de centrado vertical es mucho más fácil y no requiere CSS adicional .

Sólo tiene que utilizar las d-flexy align-items-centerutilidad clases ..

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

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

Importante: el centrado vertical es relativo a la altura . El contenedor principal de los elementos que intenta centrar debe tener una altura definida . Si desea el alto de la página, use vh-100o min-vh-100en el padre. Por ejemplo:

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

agregue Bootstrap.css y luego agregue esto a su 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>

En Bootstrap 4 :

para centrar al niño horizontalmente , use bootstrap-4 class:

justify-content-center

para centrar al niño verticalmente , use la clase bootstrap-4:

 align-items-center

pero recuerde no olvide usar la clase d-flex con estas, es una clase de utilidad bootstrap-4, así

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

Nota: asegúrese de agregar utilidades bootstrap-4 si este código no funciona

Sé que no es la respuesta directa a esta pregunta, pero puede ayudar a alguien

Mi técnica preferida:

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

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

Manifestación

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>

Ver también este violín !

Probado en IE, Firefox y 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>

Encontrado en https://css-tricks.com/centering-css-complete-guide/

para bootstrap4 centro vertical de pocos artículos

d-flex para reglas flex

columna flexible para dirección vertical en artículos

justify-content-center para centrar

style = 'height: 300px;' debe tener para los puntos de ajuste donde el centro sea calc o use la clase h-100

luego para el centro horizontal div d-flex justify-content-center y algún contenedor

entonces tenemos una jerarquía de 3 etiquetas: 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 está utilizando Bootstrap 4, solo tiene que agregar 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>

Las clases: d-table, d-table-cell, w-100, h-100 y align-middle harán el trabajo

Dale a la clase contenedor

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

Dale al div que está dentro del contenedor:

align-content: center;

Todo el contenido dentro de este div se mostrará en el medio de la página.

Esta es la forma en que estoy usando para alinear contenido verticalmente: arriba / centro / abajo con bootstrap 3 filas. Bootstrap 3 columnas con la misma altura y alineadas 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 -->

Aquí hay una demostración de JSFiddle .