html - Transform not working when parent's height is set in viewport units -

i'm having problems vertical centering. header has height of 100vh, , child element, site-info, has unspecified height. site-info element supposed vertically centered within header.

i've tried standard transform:translatey solution, doesn't work. top:50% work, it's transform doesn't happen. can see firebug transform property attached site-info, nothing happens.

i've tried using vertical-align: center on site-info no success, , using position:absolute solution header makes disappear completely. using position:absolute on site-info not either.

html:

<header>      <div class="site-info">         <h1>title</h1>         <p>some content</p>     </div>  </header> 

css:

header{ background-position:top center; background-size:100%; background-size:cover; height:100vh; position:relative; text-align:center; color:white; overflow:hidden; }  div.site-info{ position:relative; text-align:center; display:inline-block; top: 50%; -moz-transform: translatey(-50%); -webkit-transform: translatey(-50%); -ms-transform: translatey(-50%); transform: translatey(-50%); } 

since know parent container's height, can use line-height , vertical-align in tandem child's display inline-block:

header {     background-color:grey;     background-position:top center;     background-size:100%;     background-size:cover;     height:100vh;     line-height: 100vh; /* -- same height -- */     position:relative;     text-align:center;     color:white;     overflow:hidden; } div.site-info {     position:relative;     text-align:center;     display:inline-block;     line-height: 1; /* -- reset 1 naturally inherit parent's enormous value -- */     vertical-align: middle; /* -- work -- */     /* top: 50%;     -moz-transform: translatey(-50%);     -webkit-transform: translatey(-50%);     -ms-transform: translatey(-50%);     transform: translatey(-50%);*/ }