如何居中设置position: relative属性的导航栏？

我需要为自己网站的导航栏实现居中效果，目前导航栏的ul设置了position: relative属性。尝试过一些方案，但都要求把导航栏的position改成absolute，这会破坏现有的整体CSS样式，所以不能这么做。

目前我是通过手动调整导航栏两侧的margin来实现居中，但这显然不是一个优雅的解决方案。以下是我当前的CSS和HTML代码：

当前CSS代码 #

body header .bottom-header { 
  border-radius: 15px 0 0 0; 
  width: 100%; 
  height: 125px; 
  background: linear-gradient(to right, #381107, #993013, #FF5221); 
  text-align: center; 
}
body header .bottom-header ul { 
  position: relative; 
  top: 32%; 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
}
body header .bottom-header ul li a { 
  transition: all .4s ease; 
  color: rgba(255, 255, 255, 0.4); 
  text-decoration: none; 
  text-transform: uppercase; 
  font-weight: bold; 
  font-size: 14px; 
}
body header .bottom-header .button { 
  transition: all .4s ease; 
  display: block; 
  float: left; 
  top: 40px; 
  margin: auto; 
  min-width: 13%; 
  max-width: 13%; 
  padding-top: 8px; 
  padding-bottom: 8px; 
  border: 2px solid rgba(255, 255, 255, 0.4); 
  border-radius: 12px; 
  margin-left: 0.4%; 
  margin-right: 0.4%; 
  cursor: pointer; 
}
body header .bottom-header .button:hover { 
  border: 2px solid rgba(255, 255, 255, 0.7); 
}
body header .bottom-header .button:hover a { 
  color: rgba(255, 255, 255, 0.7); 
}

当前HTML代码 #

<center>
<div class="bottom-header">
<ul>
<li class="button" id="top" style="margin-left: 1%;" onclick="window.location='hem.html';"><a href="hem.html">Hem</a></li>
<li class="button" id="top" onclick="window.location='om.html';"><a href="om.html">Om Mango</a></li>
<li class="button" id="top" onclick="window.location='filosofi.html';"><a href="filosofi.html">Filosofi</a></li>
<li class="button" id="top" onclick="window.location='personal.html';"><a href="personal.html">Personal</a></li>
<li class="button" id="bottom-start" onclick="window.location='kontakt.html';"><a href="kontakt.html">Kontakt</a></li>
<li class="button" id="bottom" onclick="window.location='hitta-hit.html';"><a href="hitta-hit.html">Hitta hit</a></li>
<li class="button" id="bottom" onclick="window.location='bostaderna.html';"><a href="bostaderna.html">Verksamheterna</a></li>
</ul>
</div>
</center>

解决方案：使用Flexbox实现优雅居中 #

完全不需要修改position: relative，也不用手动计算margin，用Flexbox就能轻松搞定，而且不会破坏现有样式。具体修改如下：

1. 更新导航栏列表的CSS #

给ul添加Flex布局属性，实现水平居中：

body header .bottom-header ul {
  position: relative;
  top: 32%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  /* 添加以下Flex属性 */
  display: flex;
  justify-content: center; /* 核心：水平居中所有子元素 */
  gap: 0.8%; /* 替代原来的margin-left/margin-right，更简洁统一 */
}

2. 调整按钮的CSS #

去掉float: left（Flex布局不需要float），简化margin设置：

body header .bottom-header .button {
  transition: all .4s ease;
  display: block;
  /* 移除float: left */
  top: 40px;
  min-width: 13%;
  max-width: 13%;
  padding-top: 8px;
  padding-bottom: 8px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  cursor: pointer;
  /* 移除原来的margin-left/margin-right，改用ul的gap控制间距 */
}

3. 清理HTML #

去掉<center>标签（现在用CSS实现居中，语义化更好）：

<div class="bottom-header">
<ul>
<li class="button" id="top" onclick="window.location='hem.html';"><a href="hem.html">Hem</a></li>
<li class="button" id="top" onclick="window.location='om.html';"><a href="om.html">Om Mango</a></li>
<li class="button" id="top" onclick="window.location='filosofi.html';"><a href="filosofi.html">Filosofi</a></li>
<li class="button" id="top" onclick="window.location='personal.html';"><a href="personal.html">Personal</a></li>
<li class="button" id="bottom-start" onclick="window.location='kontakt.html';"><a href="kontakt.html">Kontakt</a></li>
<li class="button" id="bottom" onclick="window.location='hitta-hit.html';"><a href="hitta-hit.html">Hitta hit</a></li>
<li class="button" id="bottom" onclick="window.location='bostaderna.html';"><a href="bostaderna.html">Verksamheterna</a></li>
</ul>
</div>

为什么这个方案好用？ #

• Flexbox是现代CSS布局的标准，专门解决这类居中、排列问题，比手动调margin可靠得多
• 完全保留了你原来的position: relative设置，不会影响其他依赖这个属性的样式
• 用gap控制按钮间距比单独设置左右margin更统一，后续修改也更方便
• 去掉float可以避免一些布局塌陷、高度计算异常的潜在问题

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