在屏幕上居中显示导航菜单

<nav>
  <ul>
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
    <li><a href="#">菜单项4</a></li>
  </ul>
</nav>

nav {
  text-align: center; /* 设置导航菜单居中对齐 */
}

ul {
  list-style-type: none; /* 去除默认的列表样式 */
  padding: 0;
  margin: 0;
}

li {
  display: inline-block; /* 将菜单项水平排列 */
}

a {
  display: block; /* 将链接设置为块级元素 */
  padding: 10px 20px; /* 设置链接的内边距 */
  text-decoration: none; /* 去除链接的下划线 */
}

window.addEventListener('resize', function() {
  var nav = document.querySelector('nav');
  if (window.innerWidth < 768) {
    nav.style.display = 'none'; // 小于768px时隐藏导航菜单
  } else {
    nav.style.display = 'block'; // 大于等于768px时显示导航菜单
  }
});