How to keep an image centered and responsive?

Question

I have an image, centered both, horizontally and vertically

#logo01{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-146px;  // half of hei         


        

Answer 1

This is a dirty way around:

JSFiddle

div.shadow {
    position:absolute;
    max-width:45%;
    max-height:45%;
    top:50%;
    left:50%;
    overflow:visible;
}
img.logo {
    position:relative;
    max-width:100%;
    max-height:100%;
    margin-top:-50%;
    margin-left:-50%;
}

The trick is to use div.shadow as a "dimension holder", so percentage can work.

I call it dirty because the shadow div still possess some space, which will prevent mouse from pointing things underneath it. You can use pointer event to get around that, but then IE will be left behind, and the image itself would not be pointerble either.