점보트론의 모든 내용을 수직으로 가운데에 놓습니다.

Question

점보트론의 모든 내용을 부트 스트랩 3에 가로 및 세로로 가운데에 배치하려면 어떻게합니까? 나는 방금 그것을 배우기 시작했다.

다음

내 코드입니다 :

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

당신은 .. 이런 식으로 수직 정렬에 내용을 transform: translateY를 사용

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

http://www.bootply.com/MlRejPA7m2

사용 text-center을 나는이 시도

Answer 2

이 달성하기 위해 CSS 코드를 사용 :

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

을