Question

我正在尝试将图像精确地填充到设备的全屏幕上。所以我给了.container:100%和body，html到100％的高度。现在我想垂直居中对齐child div，无论它有什么内容，但它应该垂直居中。所以我尝试在50% height以及25%上提供margin-top和bottom。所以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中使用边距到verticaly中心（除非你有conatiner和child的固定高度）。

实现目标

您可以使用绝对定位

孩子到Verticaly中心的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;
}

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

3 个答案: