CSS:如何使底部固定菜单居中

Question

我制作了一个菜单条，我想将它固定在页面的底部中央。我已经尝试了一切。有没有办法在 CSS 中做到这一点？我已经使用

将菜单固定在页面底部

底部:0px位置:固定

但使用

margin: auto auto 0px auto 或 margin-left: auto

似乎没有使菜单居中。它只是停留在页面的左侧。任何想法将不胜感激!

Answer 1

display: flex 现在让这变得非常简单!见下文:

.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>

采用该方案，无需设置固定宽度，更加灵活。