CSS 如何将图像粘贴到可见屏幕的底部并居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2570877/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I stick an image to the bottom of the visible screen, and be centered?
提问by Shawn
I have a website, and I need to have an image centered at the bottom of the visible page. So in any screen size, the image will still be at the bottom, and centered.
我有一个网站，我需要在可见页面底部居中放置一个图像。因此，在任何屏幕尺寸下，图像仍将位于底部并居中。
回答by Pankaj Kumar
using pure css you can achieve this in all new browsers
使用纯 css，您可以在所有新浏览器中实现此目的
.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:fixedin not supported in IE6.
对于 IE6，您可以使用position:absolute;而不是固定。这会将图像定位在页面底部，但是当您向上滚动时，图像将随页面一起滚动。不幸的是position:fixed在 IE6 中不支持。
回答by stuyam
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;
老问题，但这是我想出的最佳解决方案。将图像放在容器 div 中，该 div 位于屏幕底部，图像在其内部居中。div 的宽度设置为 100%，因此图像可以正确居中。为了margin:auto;工作，图像必须显示为带有display:table;
Using display:table;means you don't have to set a fixed width to the element that you want centered.
使用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>
回答by fmsf
You should put it into a div and then, imagining your image is 500px wide:
你应该把它放到一个 div 中，然后想象你的图像是 500px 宽：
div.className{
position:absolute;
margin-left: -250px; /* very important for the image to be centered */
left:50%;
bottom:0px;
}
