Page d'attente avec image centrée

On se demande souvent comment center une image sur une page (sans pour autant agrandir la taille naturelle de l'image).

Voilà juste une page d'attente, responsive, avec un logo au centre de l'écran. Rien d'autre !

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Mon site</title>
    <style>
      body { width: 100vw; height: 100vh; background:#000; color: #FFF; margin: 0 auto; overflow: hidden;}
      .container{ position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%);}
      .logo { text-align: center; margin:40px auto;}
      @media all and (max-width: 640px) { .container{ width: 80vw;} }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="logo"><img src="logo.png" style="width:100%;" alt="Mon site" /></div>
    </div>
  </body>
</html>

Wiki CgX

Outils pour utilisateurs

Outils du site

Page d'attente avec image centrée

Outils de la page