css - 如何将图像粘贴到可见屏幕的底部并居中？

Question

我有一个网站，我需要在可见页面底部居中放置一个图像。因此，在任何屏幕尺寸下，图像仍将位于底部并居中。

Answer 1

使用纯 CSS，您可以在所有新浏览器中实现这一点

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

而对于 IE6，您可以使用position:absolute;而不是固定。这会将图像定位在页面底部，但是当您向上滚动时，图像将随页面滚动。不幸的是position:fixed，在 IE6 中不支持。

Answer 2

老问题，但这是我想出的最佳解决方案。将图像放入容器 div 中，div 位于屏幕底部，图像在其中居中。div 的宽度设置为 100%，因此图像可以正确居中。为了使margin:auto;图像正常工作，图像必须显示为带有display:table;

使用display:table;意味着您不必为要居中的元素设置固定宽度。

    <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

你应该把它放到一个 div 中，然后想象你的图像是 500px 宽：

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