title: Vertically center content in a Bootstrap3 row?
body: <p>I've got Bootstrap3 page, and somewhere halfway is a row with full display height. How do I center the row's content vertically?</p>
  
  <p>I already tried the "vertical-align:center" css property, but that doesn't seem to work (neither does 'middle' instead of 'center').</p>
  
  <p>Here's a small <a href="http://jsfiddle.net/yc6qy99q/" rel="nofollow">live demo</a>, or as a standalone HTML example:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset='utf-8'&gt;
  
  &lt;link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css'&gt;
  &lt;link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css'&gt;
  &lt;script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js'&gt;&lt;/script&gt;
  
  &lt;style type='text/css'&gt;
      .row { color:#ff0; }
      .bg1 { background:#007; }
      .bg2 { background:#060; }
      .special { background:#600; height:100vh; vertical-align:center; }
  &lt;/style&gt;
  
  &lt;/head&gt;&lt;body&gt;
  
  &lt;div class="container-fluid text-center"&gt;
  
      &lt;div class="row bg1"&gt;Top row&lt;br&gt;&lt;br&gt;&lt;/div&gt;
  
      &lt;div class="row bg2"&gt;Another row&lt;br&gt;With some content&lt;br&gt;&lt;br&gt;&lt;/div&gt;
  
      &lt;div class="row bg1"&gt;....Bla bla bla....&lt;br&gt;sadf asdf adsf asdf asdf&lt;br&gt;&lt;br&gt;&lt;/div&gt;
  
      &lt;div class="row special"&gt;
          &lt;h2&gt;Hello&lt;/h2&gt;
          This should be vertically centered
      &lt;/div&gt;
  
      &lt;div class="row bg2"&gt;And here's yet another row&lt;br&gt;&lt;br&gt;&lt;/div&gt;
  
      &lt;div class="row bg1"&gt;The bottom row&lt;br&gt;&lt;br&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>