Como centralizar verticalmente um contêiner no Bootstrap?

Estou procurando uma maneira de centralizar verticalmente a containerdiv dentro da jumbotrone configurá-la no meio da página.

Ele .jumbotrondeve ser adaptado à altura e largura totais da tela. A .containerdiv tem uma largura de 1025pxe deve estar no meio da página (verticalmente no centro).

Desejo que esta página tenha o jumbotron adaptado à altura e largura da tela, juntamente com o contêiner verticalmente centralizado no jumbotron. Como posso conseguir isso?

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

A maneira da caixa flexível

O alinhamento vertical agora é muito simples pelo uso do layout da caixa flexível . Atualmente, esse método é suportado em uma ampla variedade de navegadores da web, exceto o Internet Explorer 8 e 9. Portanto, precisamos usar alguns hacks / polyfills ou abordagens diferentes para o IE8 / 9.

A seguir, mostrarei como fazer isso em apenas 3 linhas de texto (independentemente da sintaxe antiga do flexbox) .

Nota: é melhor usar uma classe adicional em vez de alterar .jumbotronpara obter o alinhamento vertical. Eu usaria o vertical-centernome da classe, por exemplo.

Exemplo Aqui (Um Espelho no 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 na demonstração) :

1. Uma porcentagem de valores heightou min-heightpropriedades é relativa ao heightelemento pai, portanto, você deve especificar heightexplicitamente o elemento pai.

2. A sintaxe flexbox antiga / com prefixo do fornecedor foi omitida no snippet publicado devido à brevidade, mas existe no exemplo online.

3. Em alguns navegadores antigos como o Firefox 9 ^{(em que eu testei)} , o recipiente Flex - .vertical-centerneste caso - não terá o espaço disponível no interior do pais, portanto, precisamos especificar o widthimóvel como: width: 100%.

4. Também em alguns navegadores da web, como mencionado acima, o item flex - .containernesse caso - pode não aparecer no centro horizontalmente. Parece que a aplicada a esquerda / direita marginde autonão ter qualquer efeito sobre o item flex.
   Portanto, precisamos alinhá-lo box-pack / justify-content.

Para mais detalhes e / ou alinhamento vertical das colunas, você pode consultar o tópico abaixo:

• alinhamento vertical com o Bootstrap 3

A maneira tradicional para navegadores da web herdados

Esta é a resposta antiga que escrevi no momento em que respondi a essa pergunta. Este método foi discutido aqui e deve funcionar no Internet Explorer 8 e 9 também. Vou explicar em resumo:

No fluxo embutido, um elemento de nível embutido pode ser alinhado verticalmente ao meio por vertical-align: middledeclaração. Especificações do W3C :

meio
Alinhe o ponto médio vertical da caixa com a linha de base da caixa pai mais a metade da altura x do pai.

Nos casos em que o pai - .vertical-centerelemento neste caso - tenha um explícito height, por acaso, se pudéssemos ter um elemento filho exatamente igual heightao pai, poderíamos mover a linha de base do pai para o ponto médio do - filho de altura e surpreendentemente faça nossa criança de fluxo desejada - a .container- alinhada verticalmente ao centro.

Reunindo todos

Dito isto, podemos criar um elemento de altura total dentro dos elementos .vertical-centerby ::beforeou ::afterpseudo-elementos e também alterar o displaytipo padrão dele e o outro filho, o .containerto inline-block.

Em seguida, use vertical-align: middle;para alinhar os elementos embutidos verticalmente.

Aqui está:

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

Além disso, para evitar problemas inesperados em telas pequenas extras, você pode redefinir a altura do pseudoelemento para autoou 0ou alterar seu displaytipo para, nonese necessário, para:

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

DEMO ATUALIZADO

E mais uma coisa:

Se houver footer/ headerseções ao redor do contêiner, é melhor posicionar esses elementos adequadamente ( relative, absolute? Até você.) E adicionar um z-indexvalor mais alto (para garantir) para mantê-los sempre em cima dos outros.

Atualização 2019

O Bootstrap 4 inclui flexbox, portanto o método de centralização vertical é muito mais fácil e não requer CSS extra .

Basta usar as classes utilidade d-flexe align-items-center..

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

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

Importante: A centralização vertical é relativa à altura . O contêiner pai dos itens que você está tentando centralizar deve ter uma altura definida . Se você deseja que a altura da página use vh-100ou min-vh-100no pai! Por exemplo:

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

adicione Bootstrap.css e adicione-o ao seu 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>

No Bootstrap 4 :

para centralizar o filho horizontalmente , use a classe bootstrap-4:

justify-content-center

para centralizar o filho verticalmente , use a classe bootstrap-4:

 align-items-center

mas lembre-se de não se esqueça de usar a classe d-flex com estes, é uma classe de utilitário bootstrap-4, assim

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

Nota: certifique-se de adicionar os utilitários bootstrap-4 se este código não funcionar

Eu sei que não é a resposta direta a esta pergunta, mas pode ajudar alguém

Minha técnica preferida:

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

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

Demo

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>

Veja também este violino !

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

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

para o centro vertical bootstrap4 de poucos itens

d-flex para regras flex

coluna flexível para direção vertical nos itens

justificar-centro de conteúdo para centralizar

style = 'height: 300px;' deve ter pontos de ajuste onde o centro deve ser calculado ou usar a classe h-100

então, para o centro horizontal div d-flex justifique-centro do conteúdo e algum contêiner

então temos hierarquias de 3 tags: 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 você estiver usando o Bootstrap 4, basta adicionar 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>

As classes: d-table, d-table-cell, w-100, h-100 e align-middle farão o trabalho

Dê à classe Container

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

Dê a div que está dentro do contêiner:

align-content: center;

Todo o conteúdo desta div será exibido no meio da página.

Aqui está a maneira que eu estou usando para alinhar verticalmente o conteúdo - superior / central / inferior com 3 linhas de inicialização. Bootstrap 3 colunas com a mesma altura e alinhadas 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 -->

Aqui está uma demonstração do JSFiddle .