title: How to vertically align div inside Bootstrap 3 column
body: <p>I have a page with Twitter Bootstrap <code>container-fluid</code> class <code>div</code>, one <code>row</code> and one <code>col-md-6</code> inside that row. Row is set to 50% height of the container, and a column has 100% height of the row. I have a <code>div</code> inside that column, that I want to be in the center of the column.</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="container-fluid cont"&gt;
          &lt;div class="row logoRow"&gt;
              &lt;div class="col-md-6 logoCol"&gt;
                  &lt;div class="logoCont center-block"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And the style is:</p>
  
  <pre><code>html, body {
      height: 100%;
  }
  
  .cont {
      height: 100%;
      background: blue;
  }
  .logoRow {
      height: 50%;
      background: green;
  }
  .logoCol {
      height: 100%;
      background: yellow;
  }
  
  .logoCont {
      height: 50%;
      width: 50%;
      background: red;
  }
  </code></pre>
  
  <p>Here is my fiddle of this: <a href="http://jsfiddle.net/p9ou30g7/2/" rel="noreferrer">http://jsfiddle.net/p9ou30g7/2/</a></p>
  
  <p>Adding a <code>center-block</code> class to inner div aligned it to horizontal center, but I also need to align it vertically to the center of the column. 
  So that red div is in the center of the yellow one. 
  How can this be done?</p>