No matter what, section won't become 100% browser height

Question

Here's the website: jasontheodore.com

I am just trying to place some heading text directly in the center of a div that takes up 100% of the browser height. The code is as follows:

HTML:

<section id="landing-page">
   <div id="logo">
      <h5>Jason Theodore Bain</h5>
      <h4>graphic designer . marketer</h4>
   </div>
</section>

CSS:

html, body { height: 100%;}

#landing-page {
     margin: 0;
     top: 0;
     left: 0;
     display: block;
     height: 100%;
     min-height: 100%;
     background: #fff;
 }

 #logo {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

So it's pretty simple stuff. Just need some input as to why my #landing-page section isn't 100% of the viewport height.

NOTE Another confounding variable in this situation may be the fact that I have a <div id="wrap"> with its overflow-x: hidden enveloping the entire page. It may not affect anything, but just pointing it out.

Here's the fiddle: http://jsfiddle.net/dodr6e18/

Answer 1

As per discussion in comments, move the section just above the wrapper div and either:

(a) Make #logo absolutely positioned, with left: 20%

or better because it doesn't involve trial-and-error:

(b) Make #landing-page:

display: table;
width: 100%;

and #logo:

display: table-cell;
vertical-align: middle`

Answer 2

Try adding position:absolute to #logo:

 #logo {
   position:absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

A better approach would be using display:table to the container and table-cell to the child. Check this fiddle: http://jsfiddle.net/d7onc0jq/