Vertically & Horizontally Align inner DIV center of the page [duplicate]

Question

Possible Duplicate:
Best way to center a <div> on a page vertically and horizontally?

My website landing page has Container DIV with 100% Height & Width. I am able to align the InnerContainer div in center horizontally but i am not able to put it in center Vertically. I changed several properties mostly result remains same.

I have same example of http://jsfiddle.net/cwkzq/12/ and i am not sure where i am doing things wrong. I would appreciate help on this.

CSS Code

html, body,form { height: 100%;  }
body { margin: 0;  padding: 0; border: 1; background-color:Aqua; }
.Container { width: 100%;height: 100%; padding: 0; font-size: 12px; border:1px solid green;
 vertical-align: middle;     }
.InnerContainer
{  vertical-align: middle; width: 400px;height: 350px; border-left:1px solid;
    border-right:1px solid; border-color:#f5f5f5;margin: 0 auto;  padding: 0;
    font-size: 12px;  background-color:Red;
}

HTML CODE

<!--  Container    -->
<div class="Container">
<div class="InnerContainer">
    <!--  TopMenu Bar    -->
    <div class="colorBar">

    </div>
    <!--  TopMenu Bar   -->
    <!--  Middle Part    -->
    <div class="MiddleWrapper">
        <!--  Left Title    -->
            <div class="Title">

            </div>
        <!--   Left Title   -->
        <!--   Large Image   -->
            <div class="ImageLeftWrapper">

            </div>
        <!--   Large Image   -->
        <!--  Logo Wrapper    -->
            <div class="LogoWrapper">

            </div>
        <!--   Logo Wrapper   -->
        <!--   Page Text Area  -->
            <div class="PageText">

            </div>
        <!--   Page Text Area   -->
        <!--  Search Bar    -->
            <div class="SearchBar">

            </div>
        <!--   Search Bar    -->
        <!--   Banner Images -->
            <div class="BannerImageWrapper">

            </div>
        <!--  Banner Images   -->
    </div>
    <!--  Middle Part    -->
    <!--   Menu Wrapper    -->
    <div class="MenuWrapper">

    </div>
    <!--   Menu Wrapper    -->
    <!--   Footer Section  -->
    <div class="FooterWrapper">

    </div>
    <!--  Footer Section  -->
</div>
</div>
<!--  Container   -->

Mostly all the example on net have fixed width& Height Container DIV while in my case my container div has 100% width & height

Answer 1

The answer moved to the original question

I did it: (demo on dabblet.com)

The main trick in this demo is that in the normal flow of elements going from top to bottom, so the margin-top: auto is set to zero. However, for an absolutely positioned element acts the same distribution of free space, and similarly can be centered vertically at the specified top and bottom (does not work in IE7).

This trick will work with any sizes of div.

HTML:

<div></div>

CSS:

div {
    width: 100px;
    height: 100px;
    background-color: red;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    
    margin: auto;
}