title: How to vertically center align a div while using bootstrap layout
body: <p>I have the following code snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#content{
      text-align: center;
      vertical-align: middle;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-12"&gt;
                  &lt;div id="content"&gt;
                      &lt;h1&gt;Sample Text&lt;/h1&gt;
                      &lt;h3&gt;Subtext to the intro to the site&lt;/h3&gt;
                      &lt;hr&gt;
                      &lt;button class="btn btn-default btn-lg"&gt;Get Started!&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm using Bootstrap's grid system.  I want to be able to vertically center the contents of the div with <code>id="content"</code> (basically I want the whole content to be horizontally and vertically centered even as the page is resized).  This is meant to be a splash page with an image as the background.  How can I do that using CSS?  <code>vertical-align: middle</code> does not work.</p>
  
  <p>And just for my learning, does <code>text-align: center</code> basically center any element even though the name seems to indicate it is for text?</p>