/** Web browsers load whatever is in the
tag FIRST*/
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
/* You can use "margin: 0 auto;" to center this object.
* No need for left and right margin centering.
*
* Also, set the position to be relative then try adding your heading object
*/
.header {
width: 1000px;
height: 100px;
background-color: blue;
margin: 0 auto;
position: relative;
}
/* You don't need the margin to be 0 auto on both right and left
* if you have the width 100%
*/
.main {
width: 100%;
height: 500px;
background-color: yellow;
margin: 0;
}