Footer position - bottom and center [duplicate]

Answer 1

.footer{
    position:fixed;
    bottom:0;
    left:50%;
    margin-left:-200px; /*negative half the width */
    background:red;
    width:400px;
    height:100px;
}

Check working example at http://jsfiddle.net/qdVbR/

Answer 2

Although the other answers do work, you should avoid using negative margins.

Try this:

.footerholder {
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    position: fixed;
    text-align: center;
    width: 100%;
}

.footer {
    background: none repeat scroll 0 0 blue;
    height: 100px;
    margin: auto;
    width: 400px;
}

And the HTML would be:

<div class="footerholder">
    <div class="footer">
    ....
    </div>
</div>

---------- Edit ------------

You should also ammend your over all page size, as to take into consideration the height of your footer - otherwise you will never see the bottom content