Demo

Question

我的印象是，当在另一个div中包含的div上使用％或auto作为边距时，将根据父div计算位置。

因此，如果我有一个包含height: 50%，margin-top: 25%和margin-bottom: 25%的div，则该框应垂直居中于父div。

当我这样做时虽然div居中在页面而不是父div。

CSS

    div#header {
width: 100%; 
height: 100px; 
margin: 0px;
position: fixed;
}

    div#leftnavigation {
height: 50%;
margin-top: 25%;
margin-bottom: 25%;
float: left;
}

和HTML

    <!--Title and navigation bar-->
    <div id='header'>

     <!--Left navigation container-->
     <div id='leftnavigation'>
     <p>efwfwgwegwegweg</p>
     </div>

     </div>

在我的情况下，还有其他div浮动到上面详述的那个的右边，但是其中任何一个都表现相同。我假设我正在做一些愚蠢的事情，但我已经解决了我可以在这些方面找到的所有其他问题，但仍然无法弄明白。

修改的
这是JSFiddle的请求http://jsfiddle.net/ChtVv/

更新的
我已经尝试删除边距约束并将leftnavigation div设置为height: 100%，这样可以解决边缘属性问题吗？

Answer 1

它不起作用的原因是百分比 - 边距是父母宽度的百分比，而不是它的高度。您可以使用margin-top: 25px; margin-bottom: 25px;来说明这一点，也可以通过增加jsFiddle中右侧面板的宽度来说明这一点。

在所有情况下，％（百分比）是有效值，但需要使用小心;这些值按父母的比例计算元素的宽度，以及不小心提供的值可能有意想不到的后果。

W3 reference

Answer 2

CSS很棘手!! ：d

这是一种垂直和水平居中的借用技术，但它会涉及更改HTML和CSS。我不确定你的代码有多灵活：

CSS：

#outer {width: 100%; border: 3px solid red;}
#middle {width: 100%; text-align: center;border: 3px solid green;}
#inner {width: 200px; margin-left: auto; margin-right: auto; text-align: left;border: 3px solid blue;}

/* Courtesy: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html */

HTML

<!--Title and navigation bar-->
<div id='outer'>
    <!--Left navigation container-->
    <div id='middle'>
        <p id="inner">efwfwgwegwegweg</p>
    </div>
</div>

你可以在此基础上实现你想要的一切！

小提琴：http://jsfiddle.net/pratik136/ChtVv/2/

Answer 3

好的，所以有很多理由说明这不起作用。

主要原因是您的容器有position:fixed;

将position:fixed;添加到元素时，它不再在DOM中保留它的空间，也不会包含它的子元素。

我已经做了一个最佳方式的示例（在我的意见中）让您的孩子居中垂直＆amp; <强>水平

这是一个演示。

Demo

这是代码。

<div id="container">
    <div id="child"></div>
</div>

#container{
    width:100%;
    height:500px;
    background:#CCC;
    margin:0;
}

#child{
    width:50%;
    height:50%;
    background:#EEE;
    position:relative;
    top:25%;
    left:25%;
}

使用自动边距或％将div放在父div中

3 个答案:

Demo