下拉菜單不居中

我有一個簡單的下拉菜單，但無論如何，我不能讓它居中在頁面上。我已經嘗試了很多東西，而且我已經搜索了其他問題，無法使用它。下拉菜單不居中

這裏是我的HTML/PHP：

<ul> 

    <li><a href="index.php">Home</a></li> 
    <li>Géneros 
    <ul> 
     <?php 
     $query = "SELECT * FROM `categorias` where 1"; 

     $result = mysqli_query ($ligacao, $query); 

      while ($row = mysqli_fetch_array ($result)) { 
       $categoria= $row['cod_categoria']; 

       echo "<li><a href='artigos.php?catid=$categoria'>" . $row['nome_categoria'] . "</a></li>"; 

      } 
     ?> 
     </ul> 
    </li> 
     <?php 
     if(isset($_SESSION['id'])){ 
      echo "<li><a href='logout.php'>Logout</a></li>"; 
     } 
     else{ 
      echo "<li><a href='login.php'>Login</a></li>"; 
      echo "<li><a href='registo.php'>Registar</a></li>"; 
     } 
     ?> 
</ul>

這裏是CSS：

ul { 
    text-align: center; 
    display: inline; 
    margin: 0; 
    padding: 15px 4px 17px 0; 
    list-style: none; 
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
} 
ul li { 
    font: bold 12px/18px sans-serif; 
    display: inline-block; 
    margin-left: -4px; 
    position: relative; 
    padding: 15px 20px; 
    background: #fff; 
    cursor: pointer; 
    -webkit-transition: all 0.2s; 
    -moz-transition: all 0.2s; 
    -ms-transition: all 0.2s; 
    -o-transition: all 0.2s; 
    transition: all 0.2s; 
} 
ul li:hover { 
    background: #555; 
    color: #fff; 
} 
ul li ul { 
    padding: 0; 
    position: absolute; 
    top: 48px; 
    left: 0; 
    width: 150px; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    display: none; 
    opacity: 0; 
    visibility: hidden; 
    -webkit-transiton: opacity 0.2s; 
    -moz-transition: opacity 0.2s; 
    -ms-transition: opacity 0.2s; 
    -o-transition: opacity 0.2s; 
    -transition: opacity 0.2s; 
} 
ul li ul li { 
    background: #555; 
    display: block; 
    color: #fff; 
    text-shadow: 0 -1px 0 #000; 
} 
ul li ul li:hover { background: #666; } 
ul li:hover ul { 
    display: block; 
    opacity: 1; 
    visibility: visible; 
}

一切是正確的，righr？但菜單仍然出現在頁面的左側，我不知道爲什麼。菜單後，我得到了一個包裝div，有這個css：

.wrapper { 
    width:100%; 
    height:100%; 
    text-align:center; 
}

也許它這導致菜單不居中？我不知道...有人可以幫助我嗎？

這是唯一的額外的CSS，我得到：

body{ 
    background:url('symphony.png'); 
    color:#888; 
    padding:0; 
    margin:0; 
    font: 72.5% 'Helvetica Neue', Helvetica, Arial, sans-serif; 
} 
.wrapper { 
    width:100%; 
    height:100%; 
    text-align:center; 
} 
.artigo { 
    background:#CCC; 
    text-align:center; 
    width:30%; 
    height:60%; 
    background:#FFF; 
    margin:40px auto; 
} 
img{ 
    display: block; 
    margin-left: auto; 
    margin-right: auto 
}

來源

2015-12-13 Eduardo Araújo