Выпадающее меню по центру вертикально в навигационной панели

(function($) { // Begin jQuery
  $(function() { // DOM ready
    // If a link has a dropdown, add sub menu toggle.
    $('nav ul li a:not(:only-child)').click(function(e) {
      $(this).siblings('.nav-dropdown').toggle();
      // Close one dropdown when selecting another
      $('.nav-dropdown').not($(this).siblings()).hide();
      e.stopPropagation();
    });
    // Clicking away from dropdown will remove the dropdown class
    $('html').click(function() {
      $('.nav-dropdown').hide();
    });
    // Toggle open and close nav styles on click
    $('#nav-toggle').click(function() {
      $('nav ul').slideToggle();
    });
    // Hamburger to X toggle
    $('#nav-toggle').on('click', function() {
      this.classList.toggle('active');
    });
  }); // end DOM ready
})(jQuery); // end jQuery

.navigation {
  height: 70px;
  background: #2e2e2e;
  margin-bottom: 20px;
}

.nav-container {
  max-width: 1000px;
  margin: 0 auto;
}
nav {
    margin : 0 auto;
    text-align: center;
}
nav ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
    display: inline-block;

}

nav ul li {
    display: inline-block;
}

nav ul li a, nav ul li a:visited {
  display: block;
  padding: 0 20px;
  line-height: 70px;
  background: #2e2e2e;
  text-decoration: none;
}
nav ul li a:hover, nav ul li a:visited:hover {
  background: #2581dc;
  color: #fff;
}
nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
  padding-left: 4px;
  content: ' ▾';
}
nav ul li ul li {
  min-width: 190px;
}
nav ul li ul li a {
  padding: 15px;
  line-height: 20px;
}
.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

ul.nav-list > li > a {
    text-decoration: none;
    color: white;
    font-size: 15px;
}

.nav-dropdown > li > a {
    color: white;
    text-decoration: none;
}

.nav-dropdown > li {
    display:block;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class = "navigation">
  <div class = "nav-container">

    <nav>
      <div class = "nav-mobile"><a id = "nav-toggle" href = "#!"><span></span></a></div>
      <ul class = "nav-list">
        <li class = "active"><a href = "{% url 'home' %}">Accueil</a></li>
        <li>
          <a href = "#!">Matériel</a>
          <ul class = "nav-dropdown">
            <li><a href = "{% url 'materiel-home' %}">Accueil</a></li>
            <li><a href = "{% url 'optiques' %}">Optiques</a></li>
            <li><a href = "{% url 'monture' %}">Monture</a></li>
            <li><a href = "{% url 'capteurs' %}">Capteurs Photo</a></li>
            <li class = "disabled"><a href = "#">Accessoires</a></li>
          </ul>
        </li>
        <li>
          <a href = "#!">Galerie Photos</a>
          <ul class = "nav-dropdown">
            <li><a href = "{% url 'Lune' %}">Lune</a></li>
            <li><a href = "{% url 'Planetaire' %}">Planètes</a></li>
            <li class = "divider"></li>
            <li><a href = "{% url 'Amas_Globulaires' %}">Amas globulaires</a></li>
            <li><a href = "{% url 'Amas_Ouverts' %}">Amas ouverts</a></li>
            <li><a href = "{% url 'Nebuleuses_Diffuses' %}">Nébuleuses diffuses</a></li>
            <li><a href = "{% url 'Nebuleuses_Planetaires' %}">Nébuleuses planétaires</a></li>
            <li><a href = "{% url 'Galaxies' %}">Galaxies</a></li>
          </ul>
        </li>
        <li><a href = "{% url 'articles-home' %}">Article(s)</a></li>
        <li><a href = "{% url 'meteo-home' %}">Météo</a></li>
      </ul>
    </nav>
  </div>
</section>