Comment coller une image au bas de l'écran visible et être centré?

J'ai un site web, et j'ai besoin d'avoir une image centrée au bas de la page visible.
Ainsi, dans la taille de l'écran, l'image sera toujours en bas, et centré.

source d'informationauteur Shawn

  1. 22

    à l'aide de pure css vous pouvez atteindre cet objectif dans tous les nouveaux navigateurs

        .fix{
    position:fixed;
    bottom:0px;
    left:50%;
    }
<img src="yourimagepath" class="fix"/>

    et pour IE6 vous pouvez utiliser
    position:absolute; au lieu de fixe. il sera la position de l'image sur le bas de la page, mais comme vous le faites défiler jusqu'à l'image défile avec la page. malheureusement position:fixe pas pris en charge dans IE6

  2. 3

    Une vieille question, mais ici, c'est la meilleure solution je suis venu avec. Mettre l'image dans un div conteneur, le div est positionné en bas de l'écran et l'image est centrée à l'intérieur de lui. La div a un ensemble de largeur de 100% afin que l'image puisse centre correctement. Pour le margin:auto; de travailler l'image doit être affichée comme un élément de la table avec le display:table;

    À l'aide de display:table; signifie que vous n'avez pas à définir une largeur fixe à l'élément que vous souhaitez centré.

        <style>
    .sticky-image-wrapper{
        position: fixed;
        bottom: 0;
        width: 100%;
    }

    .sticky-image-wrapper img{
        display: table;
        position: relative;
        margin: auto;
   }
   </style>

    <div class="sticky-image-wrapper">
       <img src="myimage.jpg" />
    </di>
  3. 2

    Vous devriez le mettre dans un div et puis, en imaginant que votre image est 500px de large:

    div.className{
position:absolute;
margin-left: -250px; /* very important for the image to be centered */
left:50%;
bottom:0px;
}