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/