I am facing a challenge with my nested parent DIVs that occupy 100% of the browser window in terms of height and width. I am struggling to center secondary DIVs inside their respective parent containers.
Here are the definitions for my stacked parents:
#parent1 {
min-height:100%;
height: auto;
height: 100%;
}
#parent2 {
min-height:100%;
height: auto;
height: 100%;
}
My goal is to have the content centered within these stacked DIVs:
<div id="parent1"> <-- occupies entire browser window --/
<div id="content1"></div> <-- horizontally and vertically centered in parent1 --/
</div>
<div id="parent2"> <-- occupies entire browser window, positioned below parent1 --/
<div id="content2"></div> <-- horizontally and vertically centered in parent2 --/
</div>
...And so forth. Currently, my content CSS is as follows, but it doesn't seem to be effective:
#content1 {
width:1000px;
height:500px;
left:50%;
right:50%;
margin:-250px 0 0 -500px;
}
I've attempted both absolute and relative positioning without success...