CSS: How to center a bottom-fixed menu

Question

I've made a menu strip that I would like fixed to the bottom center of the page. I've tried everything. Is there a way to do this in CSS? I've gotten the menu to be fixed at the bottom of the page with

bottom: 0px position: fixed

but using

margin: auto auto 0px auto or margin-left: auto

doesn't seem to center the menu. It's just stuck to the left side of the page. Any thoughts would be greatly appreciated!

Answer 1

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;
}

Answer 2

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.