title: vertical-align content in middle of nested column (bootstrap)
body: <p>I want my content (H3 + p) to be in the middle (horizontally and vertically) of their <code>&lt;div class="col-md-12 inside-row"&gt;</code>. </p>
  
  <p>I tried to display: flex and align-items: center. It did positioned my content in the middle of my <code>&lt;div&gt;</code> but then the whole column was starting from the top of my page and was over my header... </p>
  
  <p>The class .vertical-align was to center (vertically and horizontally) my header and it worked well.</p>
  
  <p>I am working with Bootstrap.</p>
  
  <p>Thanks for you help!</p>
  
  <p>here is my HTML:</p>
  
  <pre><code>&lt;section&gt;
   &lt;div class="container-fluid"&gt;
       &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;img src="icons/blue-bezier.gif" alt="icon1"&gt;
                      &lt;img src="icons/blue-network.gif" alt="icon2"&gt;
                      &lt;img src="icons/blue-layers.gif" alt="icon3"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;div class="col-md-12 inside-row"&gt;
                          &lt;h3&gt;Plan for the long term&lt;/h3&gt;
                          &lt;p&gt;Launch universal, fungible, and programmable digital assets. Utilize our smart contract platform for fraud-prouf P2P trading, uncrackable DRM, esports services &amp;amp; active viral marketing.&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-12 inside-row"&gt;
                          &lt;h3&gt;Proof of Play is a purpose-built system for game currency&lt;/h3&gt;
                          &lt;p&gt;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.&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-12 inside-row"&gt;
                          &lt;h3&gt;Backed by the security of Ethereum&lt;/h3&gt;
                          &lt;p&gt;A turing complete platform with numerous pre optimized contract templates.&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;    
  &lt;/section&gt;
  </code></pre>
  
  <p>and my CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>