html - 固定居中的粘性页脚无法定位在中心..请想法

Question

我有一个 600 像素宽的页脚图形，我想将它定位在页面的中心。我目前将它固定在浏览器的底部，这就是我想要的 - 如果您知道我的意思，我希望内容从页脚下方滚动。使用固定值，我的页脚挂在左侧。使用相对值，它居中，但粘在页面底部，我最终有大量空白区域向下滚动，直到看到页脚。事实上，删除整个 position: 属性与相对值具有相同的效果。

我怎样才能解决这个问题？

我在这里尝试了一些想法 -如何在另一个 <div> 中水平居中 <div>？但他们都没有工作=[

CSS

#footer {
position: fixed;
margin-top: -110px; 
height: 110px;
width: 600px;
margin: 0 auto;
clear:both;
bottom: 0;

}

Answer 1

html:

<div class="footerWrap">
  <div class="footer"></div>
</div>

CSS：

.footerWrap {
    width:100%;
    position:fixed;
    bottom:0;
}
.footer {
    margin:auto;
    width:600px;
    height:110px;
}

工作演示

希望这有帮助

Answer 2

尝试这个

html, body, and other div relative {
   width: 100%;
}


#footer {
    position: fixed;
    margin-top: -110px; 
    height: 110px;
    width: 600px;
    clear:both;
    bottom: 0;
    left: 50%;
    margin-left: -300px; /* half size of footer */
}