Преобразование не работает, когда высота родительского элемента установлена ​​в единицах видового экрана

Question

У меня проблемы с вертикальным центрированием. header имеет высоту 100vhи его дочерний элемент, site-infoимеет неопределенную высоту. site-info элемент должен быть вертикально центрирован внутри header,

Я попробовал стандарт transform:translateY решение, но оно не работает. Top:50% работает, но это как transform не бывает Я могу видеть с FireBug, что transform собственность прикреплена к site-info, но ничего не происходит.

Я также пытался использовать vertical-align: center на site-info безуспешно, и используя некоторые position:absolute решение для header заставляет это исчезнуть полностью. С помощью position:absolute на site-info тоже не помогает.

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

Как я сказал в комментарии к моему вопросу, проблема была в конфликте с animate.css; FadeInUp анимация.

Я пытался выровнять родителей по вертикали div с преобразованием. Я также хотел, чтобы это оживить, поэтому я применил FadeInUp к нему, не зная, что FadeInUp также используется transform, вызывая конфликт.

Я решил конфликтующие transform применяя FadeInUp анимация для детей (h1 а также p) вместо

Answer 2

Поскольку вы знаете высоту родительского контейнера, вы можете использовать высоту строки и вертикальное выравнивание в тандеме, поскольку отображение вашего ребенка является встроенным блоком:

header {
    background-color:grey;
    background-position:top center;
    background-size:100%;
    background-size:cover;
    height:100vh;
    line-height: 100vh; /* -- same as 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 to 1 as it will naturally inherit parent's enormous value -- */
    vertical-align: middle; /* -- This will work now -- */

   /* top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);*/
}