CSS:固定在底部并居中

Question

我需要将页脚固定在页面底部并将其居中。页脚的内容可能会随时更改，所以我不能通过 margin-left: xxpx; 将其居中。右边距:xxpx;

问题是由于某种原因这不起作用:

#whatever {
  position: fixed;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
}

我爬遍了网络，一无所获。我尝试制作一个容器 div 和 nada。我尝试了其他组合和 gurnisht。我怎样才能做到这一点？

谢谢

Answer 1

您应该使用像这样的粘性页脚解决方案:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

还有这样的；

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}

使用 html:

<div id="wrap">

    <div id="main" class="clearfix">

    </div>

</div>

<div id="footer">

</div>