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

Question

I'm having problems with vertical centering. The header has a height of 100vh, and its child element, site-info, has an unspecified height. The site-info element is supposed to be vertically centered within header.

I've tried the standard transform:translateY solution, but it doesn't work. Top:50% does work, but it's like the transform doesn't happen. I can see with FireBug that the transform property is attached to site-info, but nothing happens.

I've also tried using vertical-align: center on site-info with no success, and using some position:absolute solution for the header makes it disappear completely. Using position:absolute on site-info does not help 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%);
}

Answer 1

As I stated in a comment to my question, the issue was a conflict with animate.css; the FadeInUp animation.

I tried to vertically align the parent div with transform. I also wanted it to animate so I applied FadeInUp to it, without knowing that FadeInUp also used transform, causing conflict.

I solved the conflicting transform by applying the FadeInUp animation to the children (h1 and p) instead.