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.

Related