수직 <p>이</p> 내 코드와 링크입니다 ... 내가 부트 스트랩 4 베타 2를 사용하고 4

Question

부트 스트랩과 양식을 aling 나는 페이지에 양식을 중심으로 할 수없는 오전
https://codepen.io/davidrodri/pen/jawpeJ

<div class="container"> 
    <div class="row justify-content-center h-100 align-middle"> 
    <div class="align-self-center"> 
     <form> 
      <h2 class="text-center">Benvenuto</h2> 
      <div class="form-group"> 
       <label for="username">Utente</label> 
       <input type="text" class="form-control" id="username" > 
      </div> 
      <div class="form-group"> 
       <label for="password">Password</label> 
       <input type="password" class="form-control" id="password" > 
      </div> 
      <button class="btn btn-lg btn-primary btn-block" type="submit">Login</button> 
     </form> 
    </div> 
    </div> 
</div> 

Answer 1

은 먼저

html, 
body { 
    height: 100%; 
} 

다음 수직에 맞게 공간을 얻을 것이다 컨테이너 높이 100 %

<div class="container h-100"> 
    <div class="row justify-content-center h-100 align-middle"> 
    <div class="align-self-center"> 
     <form> 
      <h2 class="text-center">Benvenuto</h2> 
      <div class="form-group"> 
       <label for="username">Utente</label> 
       <input type="text" class="form-control" id="username" > 
      </div> 
      <div class="form-group"> 
       <label for="password">Password</label> 
       <input type="password" class="form-control" id="password" > 
      </div> 
      <button class="btn btn-lg btn-primary btn-block" type="submit">Login</button> 
     </form> 
    </div> 
    </div> 

지금 align-self-center을 설정 100 %에 HTML과 몸 높이를 설정해야합니다.

Answer 2

는

이 https://codepen.io/anon/pen/oowaav

.parentdiv{ 
    align-items: center; 
    display: flex; 
    height: 100vh; 
} 

cdoepen 업데이트 부모 사업부에 다음과 같은 CSS를 적용