title: CSS Center (vertical on line-height and horizontal on page) Div's
body: <p>I'm attempting to make a header with the div's centered with a logo in the middle. With the Logo div hanging over, which I've successfully done. I can not however figure out how to place the logo div in the middle of the link divs for the life of me.</p>
  
  <p>Any help would be appreciated, google searching hasn't gotten me any luck, but I'm not sure I know what to search for. I'm not good at making things look pretty normally :(</p>
  
  <p>Page Layout:</p>
  
  <ul>
  <li>Header (overlay)</li>
  <li>Content (z-index: -1)</li>
  </ul>
  
  <p>Image of site without a float declared on <code>.headerLogo</code>
  <img src="https://i.stack.imgur.com/aHhvc.png" alt="enter image description here"></p>
  
  <p>Image of site with <code>float: left</code> declared on <code>.headerLogo</code>
  <img src="https://i.stack.imgur.com/b9kV1.png" alt="enter image description here"></p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class='header'&gt;
    &lt;div class='headerLink'&gt;Home&lt;/div&gt;
    &lt;div class='headerLink'&gt;Contact&lt;/div&gt;
    &lt;div class='headerLogo'&gt;&lt;/div&gt;
    &lt;div class='headerLink'&gt;Menu&lt;/div&gt;
    &lt;div class='headerLink'&gt;Connect&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='content'&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>*{
    margin: 0;
  }
  body,html{
    background-color: #000;
    color: #FFF;
    text-align: center;
    font-family: calibri;
    height: 100%;
    overflow:auto;
  }
  
  .header{
    top:0;
    height: 100px;
    line-height: 100px;
    width: 100%;
    display: inline-block;
    border-bottom: lime 10px solid;
    margin:0;
    position: static;
    background-color: #000;
    font-size: 24px;
  }
  
  .headerLink{
    display: inline-block;
    float: center;
    margin-left: 60px;
    margin-right: 60px;
    margin-top: 0px;
    margin-bottom: 0px;
  }
  
  .headerLogo{
    display: inline;
    float: left;
    position: static;
    background-image: url('/images/logo.jpg');
    background-image: no-repeat;
    background-position: left top;
    background-size: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: lime;
    color: lime;
    width: 200px;
    height: 200px;
    line-height: 100px;
  
  }
  .content{
   z-index: -1;
   float: left;
   text-align: center;
   min-height: 100%;
   width: 100%;
   margin-top: -110px;
   margin-bottom: -50px;
   background-color: #333343;
  }
  </code></pre>