Vertically & Horizontally Align inner DIV center of the page

Question

Possible Duplicate: Best way to center a

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 ```

Accepted Answer

If you know the exact size of the block you want to align it's the easiest way to do this: jsfiddle

add this style to your .InnerContainer

```
.InnerContainer{
  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;
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -175px;
}
```

Vertically & Horizontally Align inner DIV center of the page

Solution

Problem

Related problems