parent 的高度以视口单位设置时变换不起作用

Question

我在垂直居中时遇到问题。 header 的高度为 100vh，其 child 元素 site-info 的高度未指定。 site-info 元素应该在 header.

中垂直居中

我已经尝试了标准的 transform:translateY 解决方案，但它不起作用。 Top:50% 确实有效，但好像 transform 没有发生。我可以用 FireBug 看到 transform 属性附加到 site-info，但没有任何反应。

我也试过在 site-info 上使用 vertical-align: center 但没有成功，并且对 header 使用一些 position:absolute 解决方案使其完全消失。在 site-info 上使用 position:absolute 也无济于事。

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

因为您知道 parent 容器的高度，您可以串联使用 line-height 和 vertical-align，因为 child 的显示是 inline-block：

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%);*/
}

Answer 2

正如我在对我的问题的评论中所述，该问题与 animate.css 发生冲突； FadeInUp 动画。

我试图将父级 div 与变换垂直对齐。我也想让它动起来，所以我对它应用了 FadeInUp，却不知道 FadeInUp 也使用了 transform，导致了冲突。

我通过将 FadeInUp 动画应用于子项（h1 和 p）来解决冲突 transform。

parent 的高度以视口单位设置时变换不起作用

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

html

css

viewport

vertical-alignment

viewport-units