how to centre this menu in mobile latout with Responsive design

Question

Now the menu in mobile layout is at the left, and I want to put it at centre? Ii must be horizontal in my design. Could someone tell me how to do that?

 $('#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

Try this

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

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

Answer 2

Use text-align: center and display: inline-block instead of float: left

codepen

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

EDIT: bonus for vertical center as well

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