부트 스트랩 컨테이너를 수직으로 센터링하는 방법은 무엇입니까?

Question

이 부트 스트랩 컨테이너 div를 세로로 가운데 맞추는 방법은 무엇입니까? 나는 그것이 위와 아래에 검은 색으로 검은 페이지가 세로로 놓여있는 페이지를 볼 수 있기를 바란다.

데모 :https://jsfiddle.net/yunr225g/

HTML :

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6 text-center"> 
     <img src="http://placehold.it/250x250"> 
     <button type="submit">Stay</button> 
    </div> 
    <div class="col-md-6 text-center"> 
     <img src="http://placehold.it/250x250"> 
     <button type="submit">Leave</button> 
    </div> 
    </div> 
</div> 

CSS :

body { 
    margin: 10px; 
    background:black; 
} 
button { 
    display:block; 
    text-align:center; 
    margin:0 auto; 
    margin:60px auto; 
    background:black; 
    border:2px solid #ffca00; 
    padding:30px; 
    width:250px; 
    color:#ffca00; 
    text-transform:uppercase; 
} 

Answer 1

먼저, height:100%에 컨테이너의 모든 부모 요소를 설정해야합니다 또는 height:100vh을 직접 사용하십시오. 그런 다음 position + transform의 트릭을 사용하여 수직으로 가운데에 맞 춥니 다.

큰 화면에서 잘 작동하므로 작은 화면의 경우 미디어 쿼리 + 중단 점을 통해 조정해야 할 수도 있습니다.

jsFiddle

html, body { 
    height: 100%; 
} 
body { 
    margin: 0; 
    background: black; 
} 
.container { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    border: 1px solid red; 
} 

또는이 CSS 테이블 접근 방식을 시도, 그것은 잘 작동하는 것, 그리고 부트 스트랩 그리드 영향을주지 않습니다. 참고, 래퍼로 두 개의 추가 div가 추가되었습니다.

html, body { 
    height: 100%; 
} 
body { 
    margin: 0; 
    background: black; 
} 
.container1 { 
    display: table; 
    width: 100%; 
    height: 100%; 
} 
.container2 { 
    display: table-cell; 
    vertical-align: middle; 
} 

jsFiddle