How do I stick an image to the bottom of the visible screen, and be centered?

I have a website, and I need to have an image centered at the bottom开发者_如何学C of the visible page. So in any screen size, the image will still be at the bottom, and centered.

using pure css you can achieve this in all new browsers

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

and for IE6 you can use position:absolute; instead of fixed. This positions the image on the bottom of the page but, as you scroll up, the image will scroll with the page. Unfortunately position:fixed in not supported in IE6.

You should put it into a div and then, imagining your image is 500px wide:

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

Old question but here is the best solution I came up with. Put the image in a container div, the div is positioned at the bottom of the screen and the image is centered inside of it. The div has a set width of 100% so the image can center properly. For the margin:auto; to work the image must be displayed as a table element with the display:table;

Using display:table; means you don't have to set a fixed width to the element that you want centered.

    <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>