问如何将导航栏居中对齐

EN

.tg-nav {
    z-index: 2;
    float: left;
    width: 100%;
    text-align: center;
    font: 400 13px/40px 'Open Sans', Arial, Helvetica, sans-serif;
}
.tg-navigation > ul {
    width: auto;
    float: none;
    display: inline-block;
    margin: 0 auto;
}

.tg-navigationarea {
  width: 100%;
  float: left;
  position: relative;
  background: #f7f7f7;
}

.tg-nav {
  z-index: 2;
  float: left;
  text-transform: uppercase;
  font: 400 13px/40px 'Open Sans', Arial, Helvetica, sans-serif;
}

.tg-navigation {
  width: 100%;
  float: left;
  padding: 0;
  line-height: inherit;
}

.tg-navigation ul {
  margin: 0;
  list-style: none;
  line-height: inherit;
}

.tg-navigation > ul {
  width: 100%;
  float: left;
  text-align:center;
  padding:0;
}

.tg-navigation ul li {
  line-height: inherit;
  list-style-type: none;
}

li.menu-item-has-children {
  position: relative;
}

li.menu-item-has-mega-menu {
  position: static;
}

li.menu-item-has-children > a:before,
li.menu-item-has-mega-menu > a:before {
  top: 0;
  right: 10px;
  content: '\f107';
  position: absolute;
  font-size: inherit;
  line-height: inherit;
  font-family: 'FontAwesome';
}

.sub-menu li.menu-item-has-children > a:after {
  top: 0;
  right: 10px;
  content: '\f105';
  position: absolute;
  font-size: inherit;
  line-height: inherit;
  font-family: 'FontAwesome';
}

.tg-navigation ul li .sub-menu li.current-menu-item > a {
  color: #333;
}

.tg-navigation ul li .sub-menu li.current-menu-item > a:before {
  height: 100%;
}

.tg-navigation > ul > li {
  display: inline-block;
}

.tg-navigation ul li a {
  color: #666;
  display: block;
  padding: 0 25px;
  position: relative;
  line-height: inherit;
}

.tg-navigation > ul > li > a {
  color: #333;
  z-index: 2;
}

.tg-navigation > ul > li:last-child > .sub-menu {
  right: 0;
  left: auto;
}

.tg-navigation > ul > li:last-child > .sub-menu .sub-menu {
  right: 100%;
  left: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav id="tg-nav" class="tg-nav">
  <div id="tg-navigation" class="navbar-collapse tg-navigation">
    <ul>
      <li>
        <a href="javascript:void(0);">Home</a>
      </li>
      <li>
        <a href="results.html">About</a>
      </li>
      <li>
        <a href="javascript:void(0);">Packages</a>
      </li>
      <li>
        <a href="javascript:void(0);">Destination</a>
      </li>
      <li>
        <a href="javascript:void(0);">Gallery</a>
      </li>
      <li>
        <a href="javascript:void(0);">Blog</a>
      </li>
      <li>
        <a href="javascript:void(0);">Contact us</a>
      </li>
    </ul>
  </div>
</nav>

display: flex;
justify-content: center;