为什么我的导航栏不居中？

我一直在尝试一切方法来尝试将这个导航栏居中，但它从来没有这样做。文本对齐不起作用，margin: 0 auto; 也不起作用。我尝试尽可能多地添加它以覆盖所有空间，因为无论如何它都不起作用。 这是 HTML：

 <div class="nav">
  <div class="container">
    <ul id="top-nav">
      <li class= ""><a class="first" href="#">UCMST</a></li>
      <li class=""><a href="#UCMST">About Us</a>
            <ul style="box-shadow: 0px 5px 10px #000;">
                <li><a href="#UCMST">Who We Are</a></li>
                <li><a href="#ContactUs">Our Testing Profile</a></li>
                <li><a href="#HonorAndAchievement">Honor and Achievement</a></li>

            </ul>

      </li>
       <li class=""><a href="#ContactUs">Contact Us</a></li>
       <li class=""><a href="#Classes">Classes</a></li>
       <li class="" style="width: 250px;"><a href="#ThunderChickens">Thunder Chickens</a></li>
   </ul>
  </div>
 </div>

还有CSS：

   .nav{
     background-color:#ffffff;
     margin-bottom: 10px;
     margin-right: auto;
     margin-left: auto;
     z-index: 1;
     text-align: center;
   }
.nav .container {
   margin: 30px auto 10px auto;
   text-align: center;
 }
#top-nav {
 margin: 10px auto 10px auto;
 padding: 0;
 list-style: none;
 height: 45px;
 width:930px;
 overflow: hidden;
 position: absolute;
 z-index: 999;
 background-color: #ffffff;
 box-shadow: 3px 3px 9px 3px #000,
    -3px 0px 9px 3px #000;

}
#top-nav:hover {  
 overflow: visible;
}

#top-nav li {
 text-align: center;
 float: left; 
 text-transform: uppercase;
 font: 1.5em  sans-serif;  
 width: 170px;
 padding-bottom: 0px;
}
#top-nav li a {
 display: block;
 text-decoration: none;
 font-weight: normal;
 text-align: center;
 color: #acacac;
 border-right: 1px solid #acacac; 
 padding-top: 12px;
 padding-bottom: 5px;
 height: 45px;
}
#top-nav li:first-child a {
 border-left: 1px solid #acacac; 
}
#top-nav > li a:hover {
 color: #ffffff;
 background: #212021;
 border: 1px solid #212021;
 height: 50px;
}
#top-nav li a.active {
 color: #ffae00;
}
#top-nav li ul {
 list-style-type: none;
 padding: 10px 0 10px 0;
 margin: 0;
 height: 150px;
 background-color: #ffffff;
}
#top-nav li ul li {
 font-size: 13px;
 padding: .3em;
 float: none;    
}
#top-nav li ul li a { 
 height: auto !important;
 border: none !important;
 padding: 3px;
}
#top-nav li ul li a:hover {
 color: #ffae00;
 background: transparent;
}

我们将不胜感激您能提供的任何东西。

原因与您的 #top-nav 元素使用绝对定位有关。我知道将绝对定位元素居中的唯一方法是知道元素的宽度。由于你的菜单是 930px，我们可以这样做：

#nav-bar {
    left: 50%;
    margin-left: -465px;
}

这基本上将使用 left 属性将菜单的左边缘设置为 50%，然后使用负左边距将其拉回居中。需要注意的一件重要事情是，这将使菜单相对于最近定位的父级居中，或者如果没有父级定位，则相对于页面居中。

这个网站对我理解 css 定位有很大帮助，并且是我的常规参考：学习布局 http://learnlayout.com

希望有帮助！