Can't align the hidden divs to appear at the center of the page vertically and horizontally on visibility

I can't align my hidden divs at the center of the page.

If I give position them to relative , the scroll increases as I move to one page to another (i.e that div is not aligned vertically to the center of the page)

Should I place all the three divs in one container div??

Please help!!!

Many thanks in advance..

<body>
    <div id ="page1" class="page" style=""visibility:visible>
        content
        <!-- also contains a button that hides this div and makes the
            next div visible -->
    </div>
    <div id="page2" class="page">
        content
        <!-- also contains two buttons for back and next div -->
    </div>
    <div id ="page3" class="page">
        content
        <!-- contains two buttons for back and submit -->
    </div>
</body>

The css I am using is:

.page {
    position: absolute;
    visibility:hidden;
}

The javascript I used is:

<script language="JavaScript">
var currentLayer = 'page1';
function showLayer(lyr){
hideLayer(currentLayer);
document.getElementById(lyr).style.visibility = 'visible';
currentLayer = lyr;
}

function hideLayer(lyr){
document.getElementById(lyr).style.visibility = 'hidden';
}
</script>

Solution

This is how I would center your div with the current set up DEMO http://jsfiddle.net/kevinPHPkevin/g8r7Z/

#page1 {
    position:absolute;
    top:50%;
    right:0;
    left:0;
    background:#ccc;
    width:200px;
    margin:-50px auto 0 auto;
}