CSS Center a div in a div. Make a div 100% height

There are two things that used to bug the crap out of me when I was designing a site. The first, was making a div layer take up 100% of the page, the other was centering a div in a div. The first thing you want to do is set the css html property to 100% height. This way, when you set the body element 100% height, it has something to relate the 100% to. Enough lollygagging. Here’s the code. You’ll also notice I included a centered div. This is accomplished by the “margin:0 auto 0;” setting. I hope someone finds this useful.


<style type="text/css">
html
{
height:100%;
}

body
{
text-align: center;
height:100%;
padding:0px;
margin:0px;
}

.mainDiv
{
margin: 0px auto;
height:100%;
background: #000000;
}

.insideDiv
{
margin:0 auto 0;
width: 300px;
height: 100%;
background: #FFFF00;
}
</style>

<div class="mainDiv">
<div class="insideDiv">
This div is in the middle of the parent div.
</div>
</div>