ネストされた列（ブートストラップ）の真ん中にコンテンツを配置する

Question

私のコンテンツ（H3 + p）を<div class="col-md-12 inside-row">の中央（水平方向および垂直方向）にしたい。

私は表示しようとしました：flexとalign-items：center。私のコンテンツは<div>の真ん中に位置していましたが、全体の列がページの上から始まり、私のヘッダーを越えていました...

クラスは縦（縦）と横私のヘッダーとそれはうまくいった。

私はブートストラップで作業しています。

ありがとうございました！ここ

は私のHTMLです：

<section> 
<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="row"> 
       <div class="col-md-6"> 
        <img src="icons/blue-bezier.gif" alt="icon1"> 
        <img src="icons/blue-network.gif" alt="icon2"> 
        <img src="icons/blue-layers.gif" alt="icon3"> 
       </div> 
       <div class="col-md-6"> 
        <div class="col-md-12 inside-row"> 
         <h3>Plan for the long term</h3> 
         <p>Launch universal, fungible, and programmable digital assets. Utilize our smart contract platform for fraud-prouf P2P trading, uncrackable DRM, esports services &amp; active viral marketing.</p> 
        </div> 
        <div class="col-md-12 inside-row"> 
         <h3>Proof of Play is a purpose-built system for game currency</h3> 
         <p>A decentralized network that scales down to mobile and provides a cryptographically accurate count of players online. PoP determines a fixed issuance rate based on real gameplay.</p> 
        </div> 
        <div class="col-md-12 inside-row"> 
         <h3>Backed by the security of Ethereum</h3> 
         <p>A turing complete platform with numerous pre optimized contract templates.</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>  
</section> 

と私のCSS：

.vertical-center { 
    min-height: 100%; /* Fallback for browsers do NOT support vh unit */ 
    min-height: 100vh; /* These two lines are counted as one */ 
    display: flex; 
    align-items: center; 
} 
.row { 
    height: 100vh; 
    width:100%; 
    background-size: cover; 
    margin: 0; 
    padding: 0; 
} 
section .inside-row { 
    height: 100vh; 
    width:100%; 
    background-size: cover; 
} 
section img { 
    width: 40%; 
    margin: 0 auto; 
    display: flex; 
    align-items: center; 
} 

Answer 1

あなたは余分なマークアップを追加する気にしない場合は、これまで一つの方法は自分のコンテンツの周りにラッパーを追加することです

... 
<div class="col-md-12 inside-row"> 
    <div> 
     <h3>Plan for the long term</h3> 
     <p>Launch universal, fungible, and programmable digital assets. Utilize our smart contract platform for fraud-prouf P2P trading, uncrackable DRM, esports services &amp; active viral marketing.</p> 
    </div> 
</div> 

とやる

.inside-row > * { 
    position: relative; 
    top: 50%; 
    transform: translate(0, -50%); 
}