Como coloco uma imagem na parte inferior da tela visível e me centralize?

Question

Eu tenho um site e preciso ter uma imagem centrada na parte inferior da página visível. Portanto, em qualquer tamanho de tela, a imagem ainda estará na parte inferior e centralizada.

Answer 1

Usando CSS puro, você pode conseguir isso em todos os novos navegadores

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

E para o IE6 você pode usar position:absolute; em vez de consertado. Isso posiciona a imagem na parte inferior da página, mas, ao rolar para cima, a imagem rolará com a página. Infelizmente position:fixed em não suportado no IE6.

Answer 2

Pergunta antiga, mas aqui está a melhor solução que eu criei. Coloque a imagem em uma div contêiner, a div está posicionada na parte inferior da tela e a imagem é centrada dentro dela. A DIV tem uma largura definida de 100% para que a imagem possa centrar -se corretamente. Para o margin:auto; Para funcionar, a imagem deve ser exibida como um elemento de tabela com o display:table;

Usando display:table; Significa que você não precisa definir uma largura fixa para o elemento que deseja centralizar.

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

Answer 3

Você deve colocá -lo em uma div e, então, imaginar sua imagem tem 500px de largura:

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