Exo-brain

Parce que j'ai un cerveau, mais pas trop.

Outils pour utilisateurs

Outils du site


code:html-css:page-attente

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 !

index.html
<!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>
code/html-css/page-attente.txt · Dernière modification: 05 Dec 2020 :: 11:29 de CgX