How do I center a div along the y axis?
<p>I want to center my <code>div</code> element with classes block and <code>text-center</code> not only horizontally but vertically as well.  I tried adding a <code>margin-top</code> to it but this ends up separating its parent element <code>#home</code> from the <code>ul</code> above it.  You need to sub in any <code>jpeg</code> for my <code>background</code> image of <code>#home</code> (bolded below in my <strong>css</strong>) to see what I mean.  I want the full image to be in display with the top of it touching the <code>ul</code> as it is right now, but I also want to move the div inside of <code>#home</code> downward without changing its size.  How can I do this?  Also please note I am using bootstrap <strong>css</strong> template, hence the class names.   </p>

<p><strong>HTML:</strong>      </p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/&gt;
 &lt;link rel="stylesheet" type="text/css" media="all" href="css/animate.min.css"/&gt;
 &lt;link rel="stylesheet" type="text/css" href="css/porfolioPage.css"/&gt;
 &lt;link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"/&gt;

 &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
 &lt;style&gt;
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div class="container-fluid"&gt;
    &lt;ul id="contents" class="nav nav-pills"&gt;
      &lt;li&gt;
        &lt;a href="#" id="productions"&gt;In Production&lt;/a&gt;
      &lt;/li&gt;

      &lt;li class="pull-right"&gt;
         &lt;a href='#'&gt;Contact&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="pull-right"&gt;
        &lt;a href='#'&gt;Portfolio&lt;/a&gt;
      &lt;/li&gt;

      &lt;li class="pull-right"&gt;
        &lt;a href='#'&gt;About&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="pull-right"&gt;
         &lt;a href='#'&gt;Home&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;

  &lt;div id="home"&gt;
    &lt;div class="block text-center"&gt;
      &lt;h1 class="homeHeading"&gt;Sandoval Labs Incorporated&lt;/h1&gt;
      &lt;h3 id="homeHeading"&gt;Developing&lt;/h3&gt;
    &lt;div class="btnList"&gt;
      &lt;a class="btn btn-primary" href="#"&gt;Twitter&lt;/a&gt;
      &lt;a class="btn btn-primary" href="#"&gt;Facebook&lt;/a&gt;
      &lt;a class="btn btn-primary" href="#"&gt;Linkedin&lt;/a&gt;
      &lt;a class="btn btn-primary" href="#"&gt;Github&lt;/a&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>CSS:</strong></p>

<pre><code>body{
    font-family: "avenir";
    font-weight:500;
}
.nav-pills{
    font-family:arial;
    font-size:2.0em;
    background-color:black;
}
#productions{
    font-family:Lobster;
}
#home{
    **background-image:url(snoopAndZuck.jpg);**
    background-size:cover;
    height:800px;
}

.btn-primary{
    font-size:1.7em;
}
h1{
    font-size: 4em;
}
.homeHeading{
    margin:0 0 0 0;
    padding:0px;

}
.block{
    opacity:.7;
    background-color: #000000;
    padding:10px;
    width:85%;
    margin-left:auto;
    margin-right:auto;
    }
</code></pre>