如何使用响应式设计将此菜单置于移动终端中心

Question

现在移动布局中的菜单位于左侧，我想把它放在中心位置？ 我必须在我的设计中保持水平。有人可以告诉我该怎么做吗？

$('#nav-toggle').click(function() {
  $('nav').toggleClass("active");
  $("#nav-toggle").toggleClass("menu-selected");
});

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  font-family: sans-serif;
  font-size: 100%;
}
#top-bar {
  position: relative;
  max-width: 1000px;
  height: 85px;
  background-color: #22bbff;
  margin-left: auto;
  margin-right: auto;
}
nav {
  position: relative;
}
#nav-toggle {
  display: none;
}
ul {
  list-style-type: none;
}
li {
  float: left;
}
a {
  text-align: center;
  text-decoration: none;
  display: block;
  color: #fff;
  background-color: #294C52;
  border: 1px solid #fff;
  width: 150px;
  padding-top: 15px;
  padding-bottom: 15px;
  position: relative;
}
a:hover {
  background-color: #1BBC9B;
}
/*Desktop*/

@media screen and (min-width: 767px) {
  #nav-toggle {
    float: right;
    display: block;
    width: 85px;
    height: 85px;
    background-image: url(../menu.jpg);
  }
  #nav-toggle.menu-selected {
    background-image: url(../menu_hover.jpg);
  }
  nav {
    float: right;
  }
  .active ul {
    display: block;
  }
  ul {
    display: none;
    top: 85px;
    width: 150px;
    position: relative;
    right: -85px;
  }
  li {}
}

<div id="top-bar">
  <a href="#" id="nav-toggle"></a>
  <nav>
    <ul>
      <li><a href="services.html" title="專業服務">專業服務</a>
      </li>
      <li><a href="join.html" title="如何參與">如何參與</a>
      </li>
      <li><a href="contact.html" title="想了解更多">聯絡我們</a>
      </li>
    </ul>
  </nav>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Answer 1

试试这个

nav {
  position: relative;
  display:table;
  margin:auto;
  text-align: center;
}
li {
  display:inline-block;
}

https://jsfiddle.net/zbnwwh96/1/

Answer 2

使用text-align: center和display: inline-block代替float: left

<强> codepen

ul {
  list-style-type: none;
  text-align: center; 
}  
li {
  display: inline-block;
}

编辑：垂直中心奖金

nav {
  position: relative;
  transform: translateY(-50%);
  top: 50%;
}