CSS: How to center a bottom-fixed menu
You can use a left property of 50% and a negative left margin equal to half the width of the footer.
http://jsfiddle.net/N7MB5/
#footer {
width: 600px;
position: fixed;
bottom: 0;
left: 50%;
margin-left: -300px;
}
display: flex
now makes this very easy! See below:
.footer {
position: fixed;
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
}
.content {
background: grey;
}
<div class="footer">
<div class="content">My bottom-fixed content</div>
</div>
With this solution, there is no need to set a fixed width which can be more flexible.