Centrer verticalement tous les contenus dans jumbotron

Question

Comment puis-je centrer horizontalement et verticalement tout le contenu d'un jumbotron dans le bootstrap 3? Je viens de commencer à l'apprendre.

Voici mon code:

HTML

<div class="site-wrapper"> 
    <div class="jumbotron"> 
     <h1>Header</h1> 
     <p id="subHeader"><small>sub header</small></p> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-sm-5 col-sm-offset-2"> 
       </div> 
       <div class="col-sm-3 lefty"> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-sm-4 col-sm-offset-4"> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

html, body { 
    height: 100%; 
    background-color: #333; 
} 
.site-wrapper { 
    width: 100%; 
    height: 100%; 
    min-height: 100%; 
    -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5); 
    box-shadow: inset 0 0 100px rgba(0,0,0,.5); 
    border-top: 5px solid #5A332B; 
} 
.jumbotron { 
    background-color: #ccbb99 !important; 
    /*background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9));*/ 
    height: 100%; 
    margin-bottom: 0; 
} 
.lefty { 
    margin: 0; 
} 

Answer 1

Vous pouvez utiliser transform: translateY pour aligner le contenu vertical comme celui-ci ..

.centerme { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

http://www.bootply.com/MlRejPA7m2

Utilisez text-center pour aligner horizontale

Answer 2

utiliser le code CSS pour y parvenir:

.jumbotron{disply:flex; 
align-content:center; 
justify-items:center; 
align-items:center; 
}