부트 스트랩 유체 컨테이너 수직 센터

Question

유체 컨테이너 (부트 스트랩) 내에 DIV를 센터링하는 데 어려움이 있습니다. 문제를 해결하는 데 도움이 될 수 있습니다.

다음 결과를 얻고 싶습니다. 페이지에서 수직으로 가운데에 위치한 전체 너비 블록 : Image vertically centered block

전 주제를 풀기 위해 "유동적 인"부트 스트랩 클래스를 사용할 때까지 몇 가지 주제를 통해 답변을 찾았습니다.

편집 : 나는 인 flexbox를 사용하려고했으나 블록은 페이지 상단에 stucked된다 enter image description here

html, 
body { 
    min-height: 100%; 
} 
.container-block { 
display: flex; 
align-items: center; 
justify-content: center; 
color: #FFF; 
} 

.block { 
height: 100px; 
width: 100%; 
background: #313131; 
} 

HTML :

<div class="fluid-container"> 
    <div class="fluid-container container-block"> 
    <div class="col-lg-12 text-center block">AAA</div> 

</div> 

당신이 있습니까 내가 뭘 잘못하고 있는지 알 겠어?

대단히 감사합니다!

Answer 1

100 % 높이가 테이블 셀을 표시하는 변화가

을 차단하기 위해 CSS에 min-height : {somemeasure}px를 추가 할 그것을 위해

시도 enoug하지 않거나 당신은 당신의 블록 인 flexbox 접근 방식을 사용하려고 수 :

.someselector { 
    display   : flex; 
    justify-content : center; 
    align-items  : center; 
} 

Answer 2

이 정말 부트 스트랩 문제가되지 않습니다 및 순수 CSS 및 absoulte 위치와 acheived 할 수 있습니다

html, 
body { 
height: 100%; 
margin: 0; 
} 
.full-page { 
height: 100%; 
width: 100%; 
background: #f1f1f1; 
posistion: relative; 

} 
.central-block { 
height: 100px; 
width: 100%; 
background: #323836; 
color: #FFF; 
margin-top: auto; 
margin-bottom: auto; 
position: absolute; 
top: 0; 
bottom: 0; 
right: 0; 
left: 0; 

} 

JS Fiddle

Answer 3

Lim Kayas가 제안한대로 Flexbox를 사용하여 종료되었습니다. 감사합니다.