How to keep an image centered and responsive?

css, position, responsive-design

Solution

This is a dirty way around:

JSFiddle

<div class="shadow"><img class="logo" src="http://placehold.it/1000x1000" /></div>

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.

Problem

I have an image, centered both, horizontally and vertically ``` #logo01{ position:absolute; top:50%; left:50%; margin-top:-146px; // half of height margin-left:-229px; // half of width cursor:pointer; } ``` Now I need a responsive design, so: ``` #logo01{ max-width:45%; max-height:45%; } ``` It works, but position is lost. How can I keep the image centered and responsive at the same time ?

Original source