Comment faire pour centrer une image et de le rendre réceptif et redimensionnable que l'écran de changement?

Je suis nouveau sur le responsive design et CSS. Il semble être une question simple, mais je ne peux pas obtenir une réponse directe à partir de Google. J'ai essayé http://css-tricks.com/centering-in-the-unknown/ Le fantôme bloc fonctionne parfaitement, mais il me laisse un arrière-plan blanc de couleur. Maintenant, je suis coincé. En gros, j'ai un logo de taille 534x385 et je veux que ce logo soit centrée sur les appareils. Dans le cas des téléphones mobiles, je voudrais que ce logo à rétrécir pour correspondre à la taille de l'écran ainsi.

<div>
    <img class="logo" src="images/shapes-logo.png" />
</div>

.logo {
    position: fixed;
    top:15%;
    left: 50%;
    margin-left: -267px;
} 

html {
    background: url('../images/shapes-background.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Voici mon CSS jusqu'à présent. Mais si je fais cela, le margin-left: -267px va causer des problèmes dans les appareils mobiles.