如何让W3示例中的响应式菜单完美居中？

下面是修改后的完整代码，完全符合你的需求：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
  /* 桌面端：让菜单容器水平居中，宽度适配内容 */
  width: fit-content;
  margin: 0 auto;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

.topnav .icon {
  display: none;
}

/* 移动端默认状态（未展开） */
@media screen and (max-width: 600px) {
  /* 隐藏所有非MENU按钮的链接 */
  .topnav a:not(.icon) {
    display: none;
  }
  /* 让MENU按钮水平居中 */
  .topnav .icon {
    display: block;
    float: none;
    margin: 0 auto;
  }
  /* 移动端菜单容器改为100%宽度，确保按钮居中 */
  .topnav {
    width: 100%;
  }
}

/* 移动端菜单展开状态 */
@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
    width: 100%;
  }
  /* 去掉MENU按钮的绝对定位，让它和菜单项一起居中 */
  .topnav.responsive .icon {
    position: static;
    margin: 0 auto;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
}
</style>

</head>
<body>

<div class="topnav" id="myTopnav">
      <a href="#home" class="active">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
      <a href="javascript:void(0);" class="icon" onclick="myFunction()">MENU</a>
</div>

<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

</body>
</html>

关键修改说明： #

桌面端调整：

• 给.topnav添加width: fit-content; margin: 0 auto;：让菜单容器宽度自适应内部菜单项，同时通过左右自动外边距实现水平居中
• 保留原有的float: left让菜单项从左到右排列，符合需求

移动端调整：

1. 默认状态：

   • 修改隐藏规则为.topnav a:not(.icon) {display: none;}：只显示MENU按钮，隐藏所有其他菜单项
   • 给.topnav .icon去掉float: right，添加float: none; margin: 0 auto;：让MENU按钮水平居中
   • 给.topnav设置width: 100%：确保按钮在页面全宽范围内居中

2. 展开状态：

   • 去掉.topnav.responsive .icon的position: absolute和right: 0; top: 0：避免按钮偏移，让它和其他菜单项一起垂直居中排列
   • 保留.topnav.responsive a的float: none; display: block; text-align: center;：确保所有菜单项垂直排列且各自水平居中

这样修改后，就能完全实现你要的效果：桌面端菜单容器居中、菜单项横向排列；移动端默认只显示居中的MENU按钮，展开后所有菜单项垂直居中排列。

内容的提问来源于stack exchange，提问作者HelloWorldCpp