2

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

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

我也尝试过使用vertical-align: centeronsite-info没有成功，并使用一些position:absolute解决方案header使其完全消失。使用position:absoluteonsite-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%);
}
4

2 回答 2

0

由于您知道父容器的高度，因此您可以同时使用 line-height 和 vertical-align，因为您的孩子的显示是内联块：

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%);*/
}
于 2015-06-29T10:20:21.710 回答
0

正如我在对我的问题的评论中所说，这个问题与animate.css; FadeInUp动画。

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

transform我通过将FadeInUp动画应用于孩子 (h1和p) 来解决冲突。

于 2015-09-23T10:03:54.400 回答