[解決済み] CSS：下端固定、中央寄せ

質問

フッターをページの一番下に固定し、中央揃えにしたいのです。フッターの内容は常に変化する可能性があるので、margin-left: xxpx; margin-right: xxpxで中央揃えすることはできません。

問題は、なぜかこれがうまくいかないことです。

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

Webをクロールしてみても何も出てきません。私はコンテナdivを作ろうとしたが、何もなかった。他の組み合わせも試しましたが、ダメでした。どうすれば実現できるのでしょうか？

ありがとうございます。

どのように解決するのですか？

このようなスティッキーフッターのソリューションを使用する必要があります。

* {
    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>