水平和垂直居中的DIV變為高度和寬度為100％的父DIV

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

您需要添加position屬性，如下所示：

#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;

}

給出確切的顏色顏色..嘗試在child div中使用float:left

Answer 3

我不確定您要水平居中對齊。 內容div或父div。 給他們上這堂課

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