Question

我遇到垂直居中问题。 <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">Tour Word</string> <string name="title_activity_main">MainActivity</string> <string name="hello">Merhaba!</string> <string name="action_settings">Ayralar</string> </resources>的高度为header，其子元素100vh的高度未指定。 site-info元素应该在site-info内垂直居中。

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

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

HTML：

site-info

CSS：

<header>

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

</header>

Answer 1

由于您知道父容器的高度，因此您可以使用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%);*/
}

Answer 2

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

我尝试将父div与变换垂直对齐。我还希望它能够设置动画，因此我将FadeInUp应用于它，却不知道FadeInUp也使用了transform，从而导致了冲突。

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

在视口单元中设置父级高度时，变换不起作用

2 个答案: