父母和孩子的身高可以都是百分比吗？

Question

我正在尝试将图像完全填充到设备的全屏。所以我给了.container:100% 和 body,html 到 100% 的高度。现在我想将child div 垂直居中对齐，无论它有什么内容，但它应该垂直居中。所以我尝试在margin-top 和bottom 上都给出50% height 和25%。所以正好 100% 它应该符合计算。但这并没有像预期的那样发生。

为什么它没有垂直居中？换句话说，为什么 div 的顶部和底部没有相等的空间，即使我用height:50%; 给出了相等的顶部和底部边距

如何垂直居中对齐？不应该有垂直滚动条，因为我将 body,html.container 的高度设置为 100%，但它正在出现。

CSS

.child{    
    width: 100%;
    height: 50%;
    margin-top: 25%;
    margin-bottom: 25%;
    background-color: red;
    color:white;
}
html,body,.container{
    width:100%;
    height:100%;
    background:url('http://cdn.morguefile.com/imageData/public/files/e/earl53/
                   preview/fldr_2009_05_25/file5821243281047.jpg');
    background-size:cover;

}

HTML

<div class="container">
    <div class="child">
        Hello i(red color div) should be cenetered in vertical direction
    </div>
</div>

JSFIDDLE

Answer 1

百分比边距根据容器的宽度计算。 see here

百分比是指包含块的宽度

（指边距）

因此，您不能在 CSS 中使用垂直居中的边距（除非您为容器和子级设置了固定高度）。

---

实现您的目标

您可以使用绝对定位

子元素垂直居中的CSS：

position:absolute;
top:25%;
left:0;
height:50%;
width:100%;

FIDDLE

在这个小提琴中，我还通过添加

使滚动条消失

body,html{
    margin:0;
    padding:0;
}

Answer 2

除了缺少：

margin:0;
padding:0;

在html, body, .container

在我看来非常集中...http://jsfiddle.net/5LMY7/

或者……

如果您可以修复child 的高度，那么您可以使用calc 来帮助您：

    .child {
    width: 100%;
    height: 50px; /* assuming fixed height */
    margin-top: calc(50% - 50px);
    margin-top: -moz-calc(50% - 50px);
    margin-top: -webkit-calc(50% - 50px);
    background-color: red;
    color:white;
}

Answer 3

试试这个代码：

Fiddle：

body
{
    margin: 0px;
    padding: 0px;

}

.child{    
    width: 100%;
    height: 50%;
    top: 25%;
    bottom: 25%;
    background-color: red;
    color:white;
    position:absolute;
}