부트 스트랩 4 수직 정렬이 작동하지 않습니다.

Question

저는 전자 소프트웨어에 대한 간단한 양식을 만들고 있는데, 소프트웨어를 실험하고 있습니다. 그러나 가장 기본적인 것들 ... 인터페이스 디자인에 집착하고 있습니다.

인터페이스에 부트 스트랩 4를 사용 중이며 세로로 가운데에 놓으려고 시도하고 있지만 동일한 주제에 대한 다른 질문에 대한 다양한 제안을 사용하여 결과가 혼합됩니다. 그들은 일하지 않거나 모든 내용을 한 줄로 짜지 않고 일반적으로 현재 레이아웃을 엉망으로 만든다.

아래 컨테이너의 항목을 세로로 정렬 할 수있는 방법에 대한 제안 사항은 무엇입니까?

<!-- Search Field --> 
<div class="container"> 
    <div class="row justify-content-center"> 
     <div class="col-sm-auto"> 
      <h1 class="text-white">Shorten M' URL!</h1> 
     </div> 
    </div> 
    <div class="row justify-content-center"> 
     <div class="col-sm-6"> 
      <div class="input-group"> 
       <input type="text" class="form-control" placeholder="Enter URL..."> 
       <span class="input-group-btn"> 
      <button class="btn btn-primary" type="button">Shorten!</button> 
     </span> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

당신이 찾고 계십니까?

.vh-100 { 
 
    height: 100vh; 
 
}

<div class="container vh-100 bg-dark"> 
 
    <div class="row vh-100 justify-content-center align-items-center"> 
 
     <div class="col-6 text-center"> 
 
      <h1 class="text-white">Shorten M' URL!</h1> 
 
      <br> 
 
      <div class="input-group"> 
 
       <input type="text" class="form-control" placeholder="Enter URL..."> 
 
       <span class="input-group-btn"> 
 
        <button class="btn btn-primary" type="button">Shorten!</button> 
 
       </span> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
     
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

는 기본적으로 화면 높이에 맞도록 용기를 가져야한다. 여기에 항목을 세로로 정렬 할 수 있습니다.