어떻게 내 첫 번째 행 수직 정렬 내가 행 섹션에서 <code>align-items-center</code> 클래스를 사용하지만이 작동하지 않습니다

Question

의 중심을 설정할 수 있습니다 내가 그림에 표시 같이

Answer 1

코드는 정상적으로 작동하지만 height으로 설정해야합니다. 현재로서는 .container과 .row이 콘텐츠의 높이를 차지했습니다. 그래서 당신은 .row에 height을 설정해야하고 .col는 수직 중심이어야합니다 사이트의 가시 영역에 수직 중심을 설정하려면

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row align-items-center" style="height:500px;"> 
 
     <div class="col-12 bg-warning"> 
 
      hello 
 
     </div> 
 
    </div> 
 
</div>

당신이 대신 height:100vh;을 사용할 수 있습니다 고정 크기.

Answer 2

을 당신은 페이지가 100 % 높은 점유 확인해야합니다.

html, body, .container, .row { 
    height: 100%; 
} 

Answer 3

이 시도 : https://jsfiddle.net/q1ypnzg8/2/

<div class="container divouter"> 
    <div class="row align-items-center divmiddle"> 
     <div class="col-12 bg-warning divinner"> 
      hello 
     </div> 
    </div> 
</div> 

CSS가 중심이 텍스트 퍼팅에 관해서

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

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

.divinner { 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
} 

Answer 4

CSS는 한계가있다. 브라우저 호환성을 위해 인라인 정렬 속성을 사용하는 것이 좋습니다. 당신은 CSS의 경우에 사용할 수 있습니다

<div align="center">Content goes here.</div> 

다른 속성은 다음과 같습니다 : 텍스트 정렬 특정 실패 할 수 있기 때문에

#divID{ margin:auto text-align: center;

} 

비록, 나는 여백 자동 속성을 원합니다 특정 태그에 대한 브라우저.

Answer 5

당신은이 CSS를 추가 할 수 있습니다 .row.align-항목 중심이 도움이 될 것입니다

.row.align-items-center { 
 
    position: absolute; 
 
    transform: translate(-50%, -50%); 
 
\t -webkit-transform: translate(-50%, -50%); 
 
\t -moz-transform: translate(-50%, -50%); 
 
\t -ms-transform: translate(-50%, -50%); 
 
    top: 50%; 
 
    left: 50%; 
 
}

희망.