移动端网站下拉菜单来源div居中对齐问题求助

我正在为网站的移动端设计下拉菜单，期望菜单显示在logo下方，但下拉菜单的来源div未与logo对齐，调整该div会影响logo的位置。我希望无论屏幕尺寸如何，下拉菜单都能从header的居中位置展开。

解决方案 #

1. 调整HTML结构 #

将下拉按钮（包含LOGO）移入.dropdown容器内，让下拉菜单的定位基准与LOGO绑定，同时移除多余的#shadowBox：

<div id="header">
  <div class="dropdown">
    <button class="dropbtn">
      <h1 class="rainbow rainbow_text_animated">LOGO</h1>
    </button>
    <div class="dropdown-content">
      <a href="/#">home</a>
      <a href="/abt">about</a>
      <a href="/com">commissions</a>
      <a href="/img">portfolio</a>
      <a href="/cv">cv</a>
      <a href="/crd">credit</a>
    </div>
  </div>
  <div id="links">
    <a href="/#">home</a>
    <a href="/abt">about</a>
    <a href="/com">commissions</a>
    <a href="/img">portfolio</a>
    <a href="/cv">cv</a>
    <a href="/crd">credit</a>
  </div>
</div>

2. 修改CSS样式 #

通用CSS调整

#header {
  height:7em;
  background:black;
  display: flex;
  align-items: center;
  justify-content: center; /* 让header内元素水平居中 */
}    

移动端样式调整

h1 {
  font-size: 3em;
  text-align:center;
  padding: 0;
  margin: 0;
}

#header {
  flex-wrap:wrap;
}

.dropdown {
  position: relative; /* 设置定位基准，让下拉菜单相对它定位 */
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 1em;
  border: none;
  outline: none;
  background-color: black;
  font-family: inherit;
  margin: 0;
  padding: 0;
}

.dropbtn {
  border: none;
  outline: none;
  background-color: black;
}

.dropdown-content {
  position: absolute;
  background-color: black;
  min-width: 10em;
  box-shadow: 0em 0.5em 1em 0em rgba(0,0,0,0.2);
  z-index: 1;
  opacity: .85;
  top: 100%; /* 紧贴父容器底部 */
  left: 50%; /* 水平偏移到父容器中点 */
  transform: translateX(-50%); /* 向左偏移自身宽度的50%，实现完全居中 */
}

.dropdown-content a {
  float: none;
  color: white;
  padding: 0.75em 1em;
  text-decoration: none;
  display: block; /* 用block实现垂直列表布局 */
  text-align: center;
  width: auto; /* 宽度自适应内容，也可固定为8em */
  margin:0;
}

.dropdown-content a:hover {
  background-color: #3c0025;
  transition: 0.5s;
  color: #21f6c2;
}

.dropdown-content a:active {
  color: #d4f621;
}

.dropdown:hover .dropdown-content {
  display: block;
} 

.hidden {
  display: none;
}

/* Mobile Fixing */
@media (max-width: 931px) {
  #links {
    display: none;
  }

  .dropdown-content {
    display: none;
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }
}

核心修改说明 #

• 绑定定位基准：将LOGO按钮与下拉菜单放入同一.dropdown容器，确保下拉菜单始终以LOGO为定位参考。
• 自适应居中：用left:50% + transform: translateX(-50%)实现下拉菜单水平居中，不受屏幕尺寸影响。
• 动态贴合：用top:100%代替固定的top:7em，让下拉菜单始终紧贴LOGO底部，避免header高度变化导致错位。
• 简化结构：移除#shadowBox，通过#header的justify-content: center直接实现LOGO居中。

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