I have an image, centered both, horizontally and vertically
#logo01{
position:absolute;
top:50%;
left:50%;
margin-top:-146px; // half of hei
You can make use of display:table
and display:table-cell
property to achieve this.
HTML:
CSS
#logo_container {
display:table;
height:100px;
width:100px;
margin:0 auto;
text-align:center;
border:1px solid #333;
}
#logo {
display:table-cell;
vertical-align:middle;
}
#logo img {
max-height:80%;
max-width:80%;
}
Here is the fiddle: http://jsfiddle.net/Qe2vG/
You can see that image is aligned central vertically. Also in case of responsive style, just change the height
and width
value of #logo_container