ブートストラップ4 - フレックス垂直アラインメント

Question

私はブートストラップ4フレックスボックスを使用して垂直アラインメントを作成していますが、私の行とカラムがコンテナの完全な高さに拡張されていない古い問題があります。そのため、コンテナはコンテンツと同じ高さしかないため、私の垂直方向のフレックスボックスコードは機能しません。

ヒーロークラスが70vhに設定されているため、コンテンツをそのコンテナ内で垂直方向に整列させたいと考えています。だから、H2、P、& aタグはフレックスグリッドレイアウト

ブートストラップ新しいを使用して、そのヒーローラッパー内で垂直に集中している私は、この問題を解決するために、最小の高さを設定する必要がありますか？

.hero { 
 
    background: red; 
 
    width: 100%; 
 
    height: 70vh; 
 
}

<link rel="stylesheet" href="https://cask.scotch.io/bootstrap-4.0-flex.css"/> 
 

 
<div class="hero"> 
 
    <div class="container"> 
 
    <div class="row flex-items-xs-middle"> 
 
     <div class="col-xs"> 
 
     <h2>a real tag line here</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce iaculis dapibus enim, ut pharetra magna venenatis non. Maecenas aliquam.</p> 
 
     <a class="tek-btn" href="#">Order now!</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

例フィドル - https://jsfiddle.net/7qynca6z/

Answer 1

だけheroフレキシボックスを作成し、それをalign-items: centerを与えます。

デモ以下とUpdated fiddle here参照してください：

.hero { 
 
    background: red; 
 
    width: 100%; 
 
    height: 70vh; 
 
    display: flex; 
 
    align-items: center; 
 
}

<link rel="stylesheet" href="https://cask.scotch.io/bootstrap-4.0-flex.css"/> 
 

 
<div class="hero"> 
 
    <div class="container"> 
 
    <div class="row flex-items-xs-middle"> 
 
     <div class="col-xs"> 
 
     <h2>a real tag line here</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce iaculis dapibus enim, ut pharetra magna venenatis non. Maecenas aliquam.</p> 
 
     <a class="tek-btn" href="#">Order now!</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

はここで最新のブートストラップ4（アルファ6）を使用して更新ソリューションです。
余分なCSSは不要。

https://www.codeply.com/go/hFtD71FMc4

<div class="hero"> 
    <div class="container d-flex align-items-center h-100"> 
    <div class="row"> 
     <div class="col-xs"> 
     <h2>a real tag line here</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce iaculis dapibus enim, ut pharetra magna venenatis non. Maecenas aliquam.</p> 
      <a class="tek-btn" href="#">Order now!</a> 
     </div> 
    </div> 
    </div> 
</div>