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

【问题标题】：How do I stick an image to the bottom of the visible screen, and be centered?如何将图像粘贴到可见屏幕的底部并居中？
【发布时间】：2011-02-03 23:31:21
【问题描述】：

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

【问题讨论】：

Left 50% 不会把它放在我的链接的中心。 testing-zone-51.blogspot.com
由于您是这里的新用户，请选择问题的最佳答案作为您的问题解决后接受的答案。它有助于将其他人指向适合您的解决方案并为您提供声誉回答者

标签： css center sticky

【解决方案1】：

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

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

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

【讨论】：

如果 position:absolute 有效，为什么还要在较新的浏览器中使用 position:fixed？
@xandy：固定是对象相对于浏览器窗口的位置。绝对是对象相对于其包含元素的位置
@shawn：我看到了你的代码。尝试在 div 内的图像上使用 ARR 类，而不是在 div 上
Pankaj Kumar，我输入了代码：.ARR{ position:fixed;底部：0px；左：50%； } 但它仍然没有居中
@Shawn 使用具有bottom: 0px; left: 0px; right: 0px; text-align: center 的外部 div 并将图像放在那里而无需任何额外的 CSS。那应该居中。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

老问题，但这是我想出的最佳解决方案。将图像放入容器 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>

【讨论】：