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

Answer 1

Hi now you can used many method of this solution as like this

Css

.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}

.wraptocenter {
    display: block;
    background:green;
    height:500px;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
.child{
background:pink;
    min-height:100px;
    width:100px;
    display:inline-block;

}

HTML

<div class="wraptocenter">
    <span></span>
    <div class="child"> Hello I am child and ver and horz....</div>
</div>

Live demo http://jsfiddle.net/w9dxv/1/

more info http://www.brunildo.org/test/img_center.html

---

if you want Center horizontal and vertical align

Css

.chv{
width:200px;
    height:100px;
    position:absolute;
    left:50%;
    top:50%;
margin-left:-100px;
    margin-top:-50px;
    border:solid 1px red;
}

HTML

<div class="chv">
    Center horizontal and vertical align
</div>

Live demo http://jsfiddle.net/HkEVZ/1/

---

if u want Center horizontally and vertically a single line of text

Css

.alldiv{
width:400px;
    height:200px;
    text-align:center;
    line-height:200px;
    border:solid 1px red;
}

HTML

<div class="alldiv">
Center horizontally and vertically a single line of text
</div> 

Live demo http://jsfiddle.net/SVEtH/1/

---

if u want Center horizontal and vertical align Used to table properties as like this ..

Css

.parent{
display:table;
    height:300px;
    text-align:center;
    border:solid 1px red;
    width:100%;
}
.child{
display:table-cell;
    vertical-align:middle;
    border:solid 1px green;
}

HTML

<div class="parent">
<div class="child">
Center horizontal and vertical align
</div>
</div>

Live demo http://jsfiddle.net/J3Zc6/2/

Answer 2

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;
}

Answer 3

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;
}