如何使移动汉堡菜单居中，并防止单击菜单项时菜单消失？

<div class="menu-container">
  <div class="hamburger-menu"></div>
  <ul class="menu-items">
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
  </ul>
</div>

.menu-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.hamburger-menu {
  width: 30px;
  height: 20px;
  background-color: #000;
}

.menu-items {
  list-style: none;
  text-align: center;
}

.menu-items li {
  padding: 10px;
}

var hamburgerMenu = document.querySelector('.hamburger-menu');
var menuItems = document.querySelector('.menu-items');

hamburgerMenu.addEventListener('click', function() {
  menuItems.classList.toggle('show');
});

menuItems.addEventListener('click', function() {
  menuItems.classList.remove('show');
});