Question

我已经堆叠了父级DIV，它们的高度和宽度都是浏览器窗口的100％，并且似乎无法将辅助DIV放在各自div的中心内。

这是我堆积的父母：

#parent1 {
    min-height:100%;
    height: auto;
    height: 100%;
}

#parent2 {
    min-height:100%;
    height: auto;
    height: 100%;
}

我想设置它，以便我的内容浮动在这些堆叠的DIV中心：

<div id="parent1">    <-- fits entire browser window --/
   <div id="content1"></div>  <-- centred horz. and vert. in parent1 --/
</div>
<div id="parent2">    <-- fits entire browser window but under parent1 --/
   <div id="content2"></div>  <-- centred horz. and vert. in parent2 --/
</div>

......等等。因为它代表我的内容CSS看起来像这样，但它不起作用：

#content1 {
    width:1000px;
    height:500px;
    left:50%;
    right:50%;
    margin:-250px 0 0 -500px;
}

我绝对或相对定位没有运气，或者......

Answer 1

您需要添加位置属性，如下所示：

#parent1 {
    min-height:100%;
    height: auto;
    height: 100%;
    position: relative;
}

#parent2 {
    min-height:100%;
    height: auto;
    height: 100%;
    position: relative;
}

#content1 {
    width:1000px;
    height:500px;
    left:50%;
    right:50%;
    margin:-250px 0 0 -500px;
    position: absolute;
}

Answer 2

#parent1 {
    height:1000px;
    background-color:#CCFF00;


}

#parent2 {
    height:1000px;
    background-color:#66CCFF;


}
#content1 {
    width:500px;
    background-color:#9900CC;
    height:500px;
    margin:350px;
    float:left;

}

给出了准确定位的颜色.. 尝试在子div中使用float:left

Answer 3

我不确定你想要水平居中对齐。内容div或父div。给他们这个班级

.middle{
    margin: 0px auto;
    width: 80%;
}

水平和垂直居中DIV到100％高度和宽度父DIV

3 个答案: